javaweb—Vue

重点为:双向数据绑定。

框架:是一个半成品软件,是一套可重用的、通用的、软件基础代码模型,基于框架进行开发,更加快捷,更加高效。

Vue快速入门

基础框架:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue</title><!--引入vue --><script src="js/vue.js"></script>   
</head>
<body><!-- 定义视图 --><div id="app"><--v-model进行数据绑定--><input type="text" v-model="message"><!-- 在界面中直接将message数据展示出来 -->{{message}} </div>
</body><!-- 定义Vue对象 --><script>new new Vue({//编写属性值el:"#app", //vue接管的区域data:{  //data定义数据模型message:"Hello World"}})</script>
</html>

Vue的常用指令

v-bind和v-model

v-bind:作用在超链接上。

v-model:作用在表单上<input type=...>

data:为数据模型

<body><div id="app"><!--vue视图--><a v-bind:href="url">百度</a><input type="text" v-model="url"></div>
</body>
<script>//定义Vue对象new new Vue({el:"#app",//vue接管的范围data:{url:"https://www.baidu.com/"}})
</script>

v-on

methods属性可以定义来定义函数。

<body><div id="app"><!--vue视图--><input type="button" value="点我一下" v-on:click="handle"></div>
</body>
<script>//定义Vue对象new new Vue({el:"#app",//vue接管的范围data:{},methods: {handle:function(){alert("你点了我一下..")}},})
</script>

v-if和v-show

<body><div id="app"><!--vue视图--><input type="text" v-model="age"><br>经判定为:<span v-if="age<=30">年轻人</span><span v-else-if="age>30&& age<=60">中年人</span><span v-else="age>60">老年人</span></div>
</body>
<script>//定义Vue对象new new Vue({el:"#app",//vue接管的范围data:{age:20},methods: {}})
</script>

判定后:

v-for 

<body><div id="app"><div  v-for="(arr, index) in address" >{{index+1}}:{{arr}}</div></div>
</body>
<script>//定义Vue对象new new Vue({el:"#app",//vue接管的范围data:{address:["上海","深圳","西安","南京","北京"]},methods: {}})
</script>

Vue案例

分析:先将表格的格式展现出来,再用Vue进行改编。

</head>
<body><div id="app"><!--创建表格--><table border="1" cellspacing="0" width="50%" ><tr ><th >编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><!-- 利用vfor循环遍历 --><tr align="center" v-for="(us, index) in users"  ><td>{{index+1}}</td><td>{{us.name}}</td><td>{{us.age}}</td><td><span v-if="us.gender==1">男</span><span v-if="us.gender==2">女</span></td><td>{{us.score}}</td><td><span v-if="us.score>=85" >优秀</span><span v-else-if="us.score>=60&&us.score<85">及格</span><span v-else style="color:red;">不及格</span></td></tr></table></div>
</body>
<script>new new Vue({el:"#app",data:{users:[{name:"Tom",age:20,gender:1,score:78},{name:"Rose",age:18,gender:2,score:86},{ name:"Jerry",age:26,gender:1,score:90},{name:"Tony",age:30,gender:1,score:52}]}})
</script>
</html>

Vue生命周期

 以mounted方法为主:

Ajax

同步与异步

原生Ajax制作了解,因为过程繁琐,现在已经基本不使用

Axios

Axios对原生的Ajax进行封装,简化书写,快速开发。

Axios入门

<body><input type="button" value="获取数据get"onclick="get()"><input type="button" value="删除数据post"onclick="post()">
</body>
<script>function get(){//通过axios发送异步请求-getaxios({method:"get",url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"}).then(result=>{console.log(result.data);})}function post(){//通过axios发送异步请求-postaxios({method:"post",url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data:"id=1"}).then(result=>{console.log(result.data);})}
</script>

推荐这种axios的调用方式:

Vue和Axios结合在mount()方法中

前端工程化

使用YApi功能,可以更好的使前后端分离出来:

YApi

 

Vue项目

目录结构

 

Vue组件库Element

 Element基本模型

<template><div></div>
</template><script>
export default {}
</script>
<style></style>

快速入门程序

先在新建的ElementView中将想要在浏览器展示的东西,在div中写出来

<template>
<div>
<el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
<script>
export default {}
</script>
<style></style>

再在APP.vue中引入element-view

<template><div>
<element-view></element-view></div>
</template><script>
import ElementView from './views/element/ElementView.vue'
export default {components: { ElementView },
}
</script>
<style></style>

Element常见组件

在Element官网上找到相应组件,复制其代码,再将代码复制到vscode中,将代码改成你想要的样子。

表格

 在ElementView.vue中中编写想要在页面展示的信息。

<template><div><!--按钮--><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><!--表格--><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></div>
</template>
<script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]};},
};
</script>
<style>
</style>

在App.vue中引入<element-view></element-view>

<template><div>
<element-view></element-view></div>
</template><script>
import ElementView from './views/element/ElementView.vue'
export default {components: { ElementView },
}
</script>
<style></style>

分页

 

</el-table><!--分页--><el-pagination background layout="sizes,prev, pager, next,jumper" :total="1000"> 
</el-pagination>

对话框

 <!--对话框-->
<el-button type="text" @click="dialogTableVisible = true">收货地址Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table>
</el-dialog>

对话框中所需要的数据,在script的data数据中填写:

dialogTableVisible用于是否显示数据,当点击这个Dialog,其里面的值就改变为true,显示数据。

 gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],dialogTableVisible: false,

 

 点击收货地址Dialog:

 表单

<template><div><!--按钮--><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><!--表格--><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table><!--分页--><el-paginationbackgroundlayout="sizes,prev, pager, next,jumper":total="1000"></el-pagination><!--对话框-->
<el-button type="text" @click="dialogTableVisible = true">收货地址Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></el-dialog> <br><!--嵌套from的对话框-->
<el-button type="text" @click="dialogFormVisible = true">嵌套表单的对话框Dialog</el-button>
<el-dialog title="表单Form" :visible.sync="dialogFormVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item>
</el-form>
</el-dialog> </div>
</template>
<script>
export default {data() {return {form: {name: '',region: '',date1: '',date2: '',delivery: false},gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],dialogTableVisible: false,dialogFormVisible :false,tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],};},methods: {onSubmit() {alert(JSON.stringify(this.form))}},
};
</script>
<style>
</style>

 整个页面展示:

Element案例

练习

根据页面原型完成员工管理页面开发,并通过Axios完成数据异步加载。

最终页面:

 步骤:

先将基础框架搭建好:

创建tilas,再在其里面创建EmpView.vue

创建页面完成对总体的布局

 

<template><div>
<el-container style="height: 700px; border: 1px solid #eee"><el-header  style="front-size:80px;background-color: rgb(238, 241, 246)">学习管理系统Header</el-header><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1">部门管理</el-menu-item><el-menu-item index="1-2">员工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><el-table :data="tableData"><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="image" label="图像" width="180"></el-table-column><el-table-column prop="gender" label="性别" width="140"></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table></el-main></el-container>
</el-container></div>
</template><script>
export default {data () {return {tableData:[]}}
}
</script><style></style>

页面组件实现
<template><div>
<el-container style="height: 700px; border: 1px solid #eee"><el-header  style="front-size:80px;background-color: rgb(238, 241, 246)">学习管理系统Header</el-header><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1">部门管理</el-menu-item><el-menu-item index="1-2">员工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!--表单--><el-form :inline="true" :model="SearchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="SearchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="SearchForm.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入职时间"><!--时间选择器--><el-date-pickerv-model="SearchForm.entrydate"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!--表格--><el-table :data="tableData" border><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="image" label="图像" width="180"></el-table-column><el-table-column prop="gender" label="性别" width="140"></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><br><!--分页条--><el-paginationbackgroundlayout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"></el-pagination></el-main></el-container>
</el-container></div>
</template><script>
export default {data () {return {tableData:[],SearchForm:{name:"",gender:"",entrydate:[]}}},methods: {onSubmit:function(){alert("查询数据")},handleSizeChange:function(val){alert("每页记录数变化"+val);}, handleCurrentChange:function(val){alert("每码数变化"+val);}},
}
</script><style></style>

 列表数据异步加载,并渲染展示

要完成异步加载:使用axios进行异步请求。

将axios写在mount中

整体演示

<template><div>
<el-container style="height: 700px; border: 1px solid #eee"><el-header  style="font-size:40px;background-color: rgb(238, 241, 246)">学习管理系统Header</el-header><el-container><el-aside width="230px" style=" border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1">部门管理</el-menu-item><el-menu-item index="1-2">员工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!--表单--><el-form :inline="true" :model="SearchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="SearchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="SearchForm.gender" placeholder="性别"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入职时间"><!--时间选择器--><el-date-pickerv-model="SearchForm.entrydate"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!--表格--><el-table :data="tableData" border><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column  label="图像" width="180"><template slot-scope="scope"> <!--插槽--><img :src="scope.row.img" width="50px" height="50px"></template></el-table-column><el-table-column  label="性别" width="140"><template slot-scope="scope"> <!--插槽-->{{scope.row.gender==1?'男':'女'}}</template></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column><el-table-column prop="updatedate" label="最后操作时间" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><br><!--分页条--><el-paginationbackgroundlayout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"></el-pagination></el-main></el-container>
</el-container></div>
</template><script>
import axios from 'axios';
export default {data () {return {tableData:[],SearchForm:{name:"",gender:"",entrydate:[]}}},methods: {onSubmit:function(){alert("查询数据")},handleSizeChange:function(val){alert("每页记录数变化"+val);}, handleCurrentChange:function(val){alert("每码数变化"+val);}},mounted() {axios.get("https://yapi.pro/mock/401965/user/getById").then((result) => {this.tableData= result.data.data;});},
}
</script><style></style>

 Vue路径

能够实现路径跳转

路由信息配置

 在EmpView.vue中要添加route-link to类似于超链接

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/23144.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python Cookbook】S01E20 fnmatch 模块做字符串匹配

目录 问题解决方案讨论 问题 在不同的操作系统下&#xff0c;怎样做字符串匹配&#xff1f; 解决方案 fnmatch() 模块提供两个函数&#xff0c;fnmatch() 以及 fnmatchcase() 可以用来执行做这样的匹配。 from fnmatch import fnmatch, fnmatchcasematch_res fnmatch(foo.…

Technart电动螺丝刀TN101控制器维修

Technart电动螺丝刀以其高效、稳定和精确的扭矩控制而闻名。然而&#xff0c;即使优质的产品&#xff0c;在长时间的使用下&#xff0c;也可能会出现TECHNART电动螺母扳手控制器故障。 常见故障及维修方法 1. 控制器不工作 症状&#xff1a;电动螺丝刀无法启动&#xff0c;或启…

【WEEK15】 【DAY2】【DAY3】Email Tasks【English Version】

Continuation from【WEEK15】 【DAY1】Asynchronous Tasks【English Version】 Contents 17. Asynchronous, Timed, and Email Tasks17.2. Email Tasks17.2.1. Email sending is also very common in our daily development, and Springboot provides support for this as well…

JeecgBoot/SpringBoot升级Nacos(2.0.4到2.2.3)启动报错

错误如下&#xff1a; 报这种错误基本就很头大了&#xff0c;是框架不兼容的问题&#xff0c;自己找很难找到解决方法。 解决方案是把SpringBoot框架版本调高。 修改前&#xff1a; <parent><groupId>org.springframework.boot</groupId><artifactId&g…

Dell戴尔XPS 16 9640 Intel酷睿Ultra9处理器笔记本电脑原装出厂Windows11系统包,恢复原厂开箱状态oem预装系统

下载链接&#xff1a;https://pan.baidu.com/s/1j_sc8FW5x-ZreNrqvRhjmg?pwd5gk6 提取码&#xff1a;5gk6 戴尔原装系统自带网卡、显卡、声卡、蓝牙等所有硬件驱动、出厂主题壁纸、系统属性专属联机支持标志、系统属性专属LOGO标志、Office办公软件、MyDell、迈克菲等预装软…

Linux基础 (十四):socket网络编程

我们用户是处在应用层的&#xff0c;根据不同的场景和业务需求&#xff0c;传输层就要为我们应用层提供不同的传输协议&#xff0c;常见的就是TCP协议和UDP协议&#xff0c;二者各自有不同的特点&#xff0c;网络中的数据的传输其实就是两个进程间的通信&#xff0c;两个进程在…

32C3-2模组与乐鑫ESP32­-C3­-WROOM­-02模组原理图、升级口说明

模组原理图&#xff1a; 底板原理图&#xff1a; u1 是AT通信口&#xff0c;wiif-tx wifi-rx 是升级口&#xff0c;chip-pu是reset复位口&#xff0c;GPIO9拉低复位进入下载模式 ESP32-WROOM-32 系列硬件连接管脚分配 功能 ESP32 开发板/模组管脚 其它设备管脚 下载固件…

【Python报错】AttributeError: ‘NoneType‘ object has no attribute ‘xxx‘

成功解决“AttributeError: ‘NoneType’ object has no attribute ‘xxx’”错误的全面指南 一、引言 在Python编程中&#xff0c;AttributeError是一种常见的异常类型&#xff0c;它通常表示尝试访问对象没有的属性或方法。而当我们看到错误消息“AttributeError: ‘NoneTyp…

激发AI创新潜能,OPENAIGC开发者大赛赛题解析

人工智能&#xff08;AI&#xff09;的飞速发展&#xff0c;特别是AIGC、大模型、数字人技术的成熟&#xff0c;不仅改变了数据处理和信息消费的方式&#xff0c;也为企业和个人提供了前所未有的机遇。在这种技术进步的背景下&#xff0c;由联想拯救者、AIGC开放社区、英特尔共…

基于SSM+Jsp的高校二手交易平台

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

【远程连接服务器】—— Workbench和Xshell远程连接阿里云服务器失败和运行Xshell报错找不到 MSVCP110.d的问题分析及解决

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、远程连接不上服务器1. Workbench远程连接失败2.Xshell也连接不上3.解决方法(1)问题描述&#xff1a;(2)解决&#xff1a; 4.再次连接服务器 二、运行Xshell…

【前端面试3+1】18 vue2和vue3父传子通信的差别、props传递的数据在子组件是否可以修改、如何往window上添加自定义属性、【多数元素】

一、vue2和vue3父传子通信的差别 1、Vue2 父组件向子组件传递数据通常通过props属性来实现。父组件可以在子组件的标签中使用v-bind指令将数据传递给子组件的props属性。在子组件中&#xff0c;可以通过props属性来接收这些数据。这种方式是一种单向数据流的方式&#xff0c;父…

python-opencv图像分割

文章目录 二值化图像骨骼连通域分割 二值化 所谓图像分割&#xff0c;就是将图像的目标和背景分离开来&#xff0c;更直观一点&#xff0c;就是把目标涂成白色&#xff0c;背景涂成黑色&#xff0c;言尽于此&#xff0c;是不是恍然大悟&#xff1a;这不就是二值化么&#xff1…

香橙派 AIpro 的系统评测

0. 前言 你好&#xff0c;我是悦创。 今天受邀测评 Orange Pi AIpro开发板&#xff0c;我将准备用这个测试简单的代码来看看这块开发版的性能体验。 分别从&#xff1a;Sysbench、Stress-ng、PyPerformance、RPi.GPIO Benchmark、Geekbench 等方面来测试和分析结果。 下面就…

DevExpress Installed

一、What’s Installed 统一安装程序将DevExpress控件和库注册到Visual Studio中&#xff0c;并安装DevExpress实用工具、演示应用程序和IDE插件。 Visual Studio工具箱中的DevExpress控件 Visual Studio中的DevExpress菜单 Demo Applications 演示应用程序 Launch the Demo…

PS去水印

去除图片水印 step1&#xff1a;使用套索工具框选图片水印 step2&#xff1a;CTRLshiftU 去色 step3&#xff1a;CTRLL 色阶 step4&#xff1a;使用第三根吸管去点击需要去掉的图片水印 成功去掉 去掉文字水印 也可按照上述方法去除

计算机网络 期末复习(谢希仁版本)第1章

大众熟知的三大网络&#xff1a;电信网络、有线电视网络、计算机网络。发展最快起到核心的是计算机网络。Internet是全球最大、最重要的计算机网络。互联网&#xff1a;流行最广、事实上的标准译名。互连网&#xff1a;把许多网络通过一些路由器连接在一起。与网络相连的计算机…

【多模态】35、TinyLLaVA | 3.1B 的 LMM 模型就可以实现 7B LMM 模型的效果

文章目录 一、背景二、方法2.1 模型结构2.2 训练 pipeline 三、模型设置3.1 模型结构3.2 训练数据3.3 训练策略3.4 评测 benchmark 四、效果 论文&#xff1a;TinyLLaVA: A Framework of Small-scale Large Multimodal Models 代码&#xff1a;https://github.com/TinyLLaVA/T…

【Unity性能优化】使用多边形碰撞器网格太多,性能消耗太大了怎么办

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 专栏交流&#x1f9e7;&…

【机器学习基础】Python编程04:五个实用练习题的解析与总结

Python是一种广泛使用的高级编程语言,它在机器学习领域中的重要性主要体现在以下几个方面: 简洁易学:Python语法简洁清晰,易于学习,使得初学者能够快速上手机器学习项目。 丰富的库支持:Python拥有大量的机器学习库,如scikit-learn、TensorFlow、Keras和PyTorch等,这些…