Vue.js学习笔记

1 Vue.js基础

Vue.js介绍

vuejs 渐进式 JavaScript 框架

Vue.js 如何应用

1 在普通html项目中，引入VUE.JS

Hb 的项目生成的默认是3.X版本

修改为 2.6.10版本

在html head 里引进js文件

 <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>

2 利用vue cli 搭建工程模式

Hello Vue

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><!-- 插值表达式：通过两个大括号，把变量包起来 -->{{showText}}</div><script>let vm = new Vue({el: '#app',  // el = element的缩写 挂载到那个元素上，或者将来渲染到那个区域 id #app css基础选择器 # id . class data:{showText : 'Hello Vue'}});</script></body>
</html>

标签绑定

标签绑定_v-bind_单向数据绑定

vue v- 叫做vue的指令

v-bind 可以动态修改HTML标签的属性

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">#ex1 {width: 200px;height: 200px;background-color: aqua;}.change {background-color: blue !important;}</style></head><body><div id="app"><!-- 插值表达式：通过两个大括号，把变量包起来 -->{{ showText }}<!-- v-bind 可以动态修改HTML标签的属性 --><span v-bind:title="showText"> 鼠标放在这里，看看显示什么 </span><div id="ex1" v-bind:class="change"></div></div><script>let vm = new Vue({el: '#app', // el = element的缩写 挂载到那个元素上，或者将来渲染到那个区域 id #app css基础选择器 # id . class data: {showText: 'Hello Vue',change: 'change'}});</script></body>
</html>

标签绑定_v-model_双向数据绑定（重点）

v-model 是应用在表单元素中的。表单元素 input select

狭义：

它会把表单元素input value值和 data里定义的属性值进行双向绑定。

所谓双向绑定 VM层数据绑定，一句话你变我也变我变你也变。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">#ex1 {width: 200px;height: 200px;background-color: aqua;}.change {background-color: blue !important;}</style></head><body><!-- vue 的双向绑定   MVC MV VM  是 vm的绑定 --><div id="app"><!-- html渲染的内容 view --><input type="text" name="" id="" v-model="input" value="" /><br>{{input}}</div><script>let vm = new Vue({el: '#app', data: {   // model 数据showText: 'Hello Vue',change: 'change',input: ''}});</script></body>
</html>

标签绑定_v-on_事件绑定（重点）

js 事件：https://developer.mozilla.org/zh-CN/docs/Web/Events

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css"></style></head><body><div id="app"><button type="button" @click="tishi(1)">提交</button><div v-on:dblclick="tishi2">考虑到房价肯定撒就发撒旦</div><input type="text" id="" @focus="tishi3('你好','新世界')" value="" /></div><script>let vm = new Vue({el: '#app',data: { // model 数据showText: 'Hello Vue',change: 'change',input: '',num: 5},methods: { //方法// 属性中,方法如何声明. k v  方法和方法之间,要用逗号分割.// 在传统js中,我们用onclick来触发单击事件,在vue中,我们要用v-on 这个v指令来触发事件// 语法糖 缩写 v-on 用 @ 字符来替代 v-on:// 语法糖 缩写 v-bind: 直接用 : 来替代tishi:function (arg) {alert(arg)},tishi2:function () {alert('另一个双击我的按钮')},tishi3:function (arg1,arg2) {alert(arg1)alert(arg2)}}});</script></body>
</html>

标签绑定_v-text_v-html_v-show

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css"></style></head><body><div id="app"><!-- div.innerTextv-text:innerText 显示文本,你有什么,我原样输出v-html:innerHtml 显示并渲染html标签v-show: 原理:他接受一个值,这个值一定是真或假的布尔值.当时真的时候,就会显示. 当是假的时候,它会给该元素追加style display none--><span v-text="html" v-show="2>1"></span><!-- 和下面的一样 --><br>{{ showText }}<button type="button" @click="changeShow">改变显示</button></div><div id="app2">{{ showText }}</div><script>let vm = new Vue({el: '#app',data: { // model 数据showText: 'Hello Vue',change: 'change',input: '',num: 5,msg: '唐山港集团',html: '<h1>唐山港集团</h1>', //innerHtmlisShow: true},methods: {/*** 动态改变data中isShow的值 每次反转*/changeShow: function() {// 单击一次,取反,当它是ture的时候,变成false;当它是false,变成truethis.isShow = !this.isShow}}});</script></body>
</html>

标签绑定_v-if-else（重点）

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css"></style></head><body><div id="app"><!-- v-if指令: 根据v-if里面的布尔值,来决定是否在html里,渲染此DOM对象,它和vshow的区别在于,它是真正的不渲染,不占位.v-else指令:用法,1是,前面的dom对象中必须有 v-if  v-else 直接写,不用再=什么v-else-if,他们的结构同下面,理解.if () {显示A}else if(){显示B}else if(){显示C}else{不是ABC}v-show:--><!-- <table border="" cellspacing="" cellpadding="" v-if="havedata"><tr><th>序号</th><th>姓名</th><th>电话</th></tr><tr><td>1</td><td>沈国福</td><td>15031519880</td></tr><tr><td>2</td><td>田华</td><td>15331519880</td></tr></table><span v-else>没有更多记录了</span>--><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div><br><br><button type="button" @click="changeA">改成A</button><button type="button" @click="changeB">改成B</button><button type="button" @click="changeC">改成C</button><button type="button" @click="changeD">改成D</button></div><script>let vm = new Vue({el: '#app',data: { // model 数据showText: 'Hello Vue',change: 'change',input: '',num: 5,msg: '唐山港集团',html: '<h1>唐山港集团</h1>', //innerHtmlhavedata: true,type: 'A'},methods: {/*** 动态改变data中isShow的值 每次反转*/changeA: function() {this.type = 'A'},changeB: function() {this.type = 'B'},changeC: function() {this.type = 'C'},changeD: function() {this.type = 'D'},}});</script></body>
</html>

一些问题

MD文件如何查看，编辑？
Vue data里能否使用变量赋值？

Vue data是一个对象，看API可以用方法，能否使用方法？

// 1 用对象的方式，来构建data
// data:{//  message : '唐山港集团欢迎您！'
// },
// 2 以方法的方式，来构建data,return 一个值 值是一个对象。
// data(){//  return {//      message: '唐山港集团欢迎您2!'
//  }
// }
// 3 以匿名函数的方式来构建data
// data:function () {//  return {//      message: '唐山港集团欢迎您3!'
//  }
// }

$data是什么？

$data:是普通js变量

vm.$data.message = vm.message
axios离线引进

标签绑定_v-for (重点)

js for 循环遍历

fori forli forof

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>V-FOR</title><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><!--对数组循环输出 --><ul><li v-for="(item,index) in deptList" :key="index">{{index+1}}-{{item}}</li></ul><!-- 对对象进行遍历输出 --><ul><li v-for="(item,key,index) in zhangsan">{{index+1}}--{{key}}--{{item}}</li></ul><!-- 对数字进行循环输出 --><div style="width: 330px;height: 330px;background-color: #1CBBB4; display: flex; flex-wrap: wrap;"><div style="width: 100px; height: 100px;margin: 5px; background-color: #E03997; text-align: center;line-height: 100px;"v-for="i in 9">{{i}}</div></div><!-- 对数组对象进行输出 --><ul><li v-for="item in result" :key="item.userId">userId:{{item.useId}} <br>姓名:{{item.userName}}<br>电话:{{item.tel}}</li></ul></div><script type="text/javascript">let vm = new Vue({el: '#app',data: {message: '唐山港集团欢迎您！',deptList: ['综合管控部','商务软件科','安质管控部','生产软件科'],zhangsan: {name: '张三',sex: 0, // 0表示男 1表示女age: 16},result: [{"Id": 192,"userName": "1","tel": "1"}, {"Id": 191,"userName": "","tel": ""}, {"Id": 182,"userName": "宋运城","tel": "654321"}, {"Id": 180,"userName": "","tel": "冀B9235K"}, {"Id": 179,"userName": null,"tel": "冀B9235K"}, {"Id": 178,"userName": null,"tel": "冀B9235K"}, {"Id": 176,"userName": null,"tel": "Tsp2022$$$"}, {"Id": 175,"userName": null,"tel": "宋运城"}, {"Id": 168,"userName": null,"tel": "宋运城"}, {"Id": 167,"userName": null,"tel": "564615"}, {"Id": 160,"userName": "测试111","tel": "123"}, {"Id": 159,"userName": "测试111","tel": "123"}, {"Id": 158,"userName": "测试111","tel": "123"}, {"Id": 157,"userName": "苏锦沅","tel": "9999999"}, {"Id": 156,"userName": "sdf","tel": "45892361245"}, {"Id": 155,"userName": "tre","tel": "18596756542"}, {"Id": 154,"userName": "sxt","tel": "15686425946"}, {"Id": 152,"userName": "马可波罗","tel": "15234567891"}, {"Id": 150,"userName": "呜呜呜呜","tel": "12345"}, {"Id": 145,"userName": "111","tel": "11111111111"}, {"Id": 144,"userName": "111","tel": "333"}, {"Id": 121,"userName": "userName","tel": "tel"}, {"Id": 120,"userName": "田华12345","tel": "394838773"}, {"Id": 118,"userName": "jg","tel": "12332155"}, {"Id": 117,"userName": "jg","tel": "12332155"}, {"Id": 113,"userName": "jgtianhua","tel": "123321"}, {"Id": 112,"userName": "false","tel": "false"}, {"Id": 109,"userName": "tianhua","tel": "1234567904"}, {"Id": 106,"userName": "这个我来","tel": "1852465852"}, {"Id": 102,"userName": "0000","tel": "0000"}, {"Id": 100,"userName": "张三","tel": "0000"}, {"Id": 99,"userName": "张三","tel": "0000"}, {"Id": 97,"userName": "11111","tel": "11111"}, {"Id": 96,"userName": "12","tel": "121212"}, {"Id": 95,"userName": "1111","tel": "1111"}, {"Id": 94,"userName": "菜鸟","tel": "18858858"}, {"Id": 84,"userName": "测试","tel": "123333"}, {"Id": 83,"userName": "测试的","tel": "1234567889"}, {"Id": 78,"userName": "mlmm","tel": "4234234"}, {"Id": 68,"userName": "冯·诺伊曼","tel": "321"}, {"Id": 63,"userName": "韩信","tel": "15234516781"}, {"Id": 62,"userName": "西施","tel": "12315617890"}, {"Id": 61,"userName": "貂蝉","tel": "12345678901"}, {"Id": 58,"userName": "孙尚香","tel": "12345678890"}, {"Id": 57,"userName": "杨玉环","tel": "12345678901"}, {"Id": 56,"userName": "蔡文姬","tel": "12345678902"}, {"Id": 55,"userName": "李白","tel": "12345678901"}, {"Id": 51,"userName": "刘备","tel": "15013578231"}, {"Id": 34,"userName": "修改结果","tel": "1665656565"}]},})</script></body>
</html>

标签绑定_v-once 一次

指令汇总

网络通讯(第三方模块)_Axios_ajax（重点）

axios文档: http://www.axios-js.com/zh-cn/docs/

CURD案例

CURD create update read delete

95% 代码都是处理CURD

curd首页
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CURD</title><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><script src="js/axios.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.title {width: 800px;margin: 0 auto;text-align: center;}.content {width: 800px;margin: 0 auto;}.btns {margin: 5px 0 5px;}button {width: 120px;height: 40px;}.small {width: 80px;height: 30px;}table {border-collapse: collapse;width: 100%;}table th,table td {border: 1px solid #7e7e7e;height: 40px;line-height: 40px;text-align: center;}</style></head><body><div id="app"><div class="title"><h1>{{title}}</h1></div><div class="content"><div id="">姓名:<input type="text" v-model="userName" /> <button type="button" @click="getUsersList" >查询</button><button type="button" @click="reset" >重置</button></div><div class="btns"><button type="button" @click="goAdd">添加</button></div><table><tr><th width="30px">Id</th><th width="120px">姓名</th><th width="120px">电话</th><th width="120px">操作</th></tr><tr v-for="item in usersList" :key="item.userId"><td>{{item.Id}}</td><td>{{item.userName}}</td><td>{{item.tel}}</td><td><button type="button" class="small" style="margin-right: 30px;"@click="goEdit(item.Id)">修改</button><button type="button" class="small" @click="delUser(item.Id)">删除</button></td></tr></table><div v-if="this.usersList.length == 0">当前没有记录</div></div></div><script type="text/javascript">let vm = new Vue({el: '#app',data: {title: '员工管理',usersList: [],userName:''},mounted() {this.getUsersList()},methods: {// axios 的回调函数,不要用普通的匿名函数,用箭头函数.否则this的指向不对.getUsersList() {axios({url: 'http://api.0315e.com/index/users',params:{userName:this.userName}}).then((res) => {this.usersList = res.data.result})},delUser(Id) {let ok = confirm('是否删除Id为' + Id + '的记录?')console.log(ok);if (ok == true) {axios({url: 'http://api.0315e.com/index/users',method: 'DELETE',data: {// userId:userId 如果键值一致,可以省略后面的:userIdId: Id}}).then((res) => {alert(res.data.msg)this.getUsersList()})} else {console.log('用户取消了操作');}},goEdit(Id) {axios({url: 'http://api.0315e.com/index/users',method: 'PUT',data: {// userId:userId 如果键值一致,可以省略后面的:userIdId: Id,userName:'王大锤',tel:'110'}}).then((res) => {alert(res.data.msg)this.getUsersList()})},goAdd() {window.location.href = 'add.html'},reset(){this.userName = ''this.getUsersList()}}})</script></body>
</html>add页
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>添加员工</title><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><script src="js/axios.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.title {width: 800px;margin: 0 auto;text-align: center;}.content {width: 800px;margin: 0 auto;}</style></head><body><div id="app"><div class="title"><h1>{{title}}</h1></div><div class="content">姓名:<input type="text" v-model="userName" /><br>电话:<input type="number" v-model="tel" /><br><button type="button" @click="addUser()" >提交</button></div></div><script type="text/javascript">let vm = new Vue({el: '#app',data: {title: '添加员工',userName:'',tel:''},mounted() {},methods: {addUser(){if (this.userName == '') {alert('请录入姓名')}if (this.tel == '') {alert('请录入电话')}axios({url: 'http://api.0315e.com/index/users',method:'POST',data:{userName:this.userName,tel:this.tel}}).then((res) => {console.log(res);alert(res.data.msg)})}}})</script></body>
</html>edit 没写完
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>编辑员工</title><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><script src="js/axios.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.title {width: 800px;margin: 0 auto;text-align: center;}.content {width: 800px;margin: 0 auto;}</style></head><body><div id="app"><div class="title"><h1>{{title}}</h1></div><div class="content">姓名:<input type="text" v-model="userName" /><br>电话:<input type="number" v-model="tel" /><br><button type="button" @click="addUser()" >提交</button></div></div><script type="text/javascript">let vm = new Vue({el: '#app',data: {title: '添加员工',userName:'',tel:''},mounted() {},methods: {addUser(){if (this.userName == '') {alert('请录入姓名')}if (this.tel == '') {alert('请录入电话')}axios({url: 'http://api.0315e.com/index/users',method:'POST',data:{userName:this.userName,tel:this.tel}}).then((res) => {console.log(res);alert(res.data.msg)})}}})</script></body>
</html>

一些概念解释

回调函数函数一种形式

简单点说，一个函数被作为参数传递给另一个函数（在这里我们把另一个函数叫做“otherFunction”），回调函数在otherFunction中被调用。
getUserList(){axios({url:"http://api.0315e.com/tsg/projects",params:{projectName:this.projectName}}).then((res) => {this.projects = res.data.result;})
},(res) => {this.projects = res.data.result;}// 父级函数function parentFun (callback) {let user = {name:'张三'}callback(user) // 回调函数}
// 子级函数
function childFun (data) {alert(data.name)
}parentFun(childFun);
用途：我们需要等到一个操作结束之后再进行下一个操作。简单理解的话就是在一个函数执行完毕后，得到想要的特定数据后在去执行的函数

this

this js都关键字代表一个对象

全局

函数

方法

匿名函数

箭头函数

var name = "冯锐";
//全局 this 指向是window对象  最高级别的对象
// console.log(this);// 函数中,this调用的是window对象
function fun() {console.log(this);
}
// fun()// 在方法中,方法是定义在对象里面的函数
// 方法
// 匿名函数 this指向是当前对象
// 箭头函数 this 指向上下文中,谁调用ta 指向谁let me = {name: '沈国福',sayHi: function() {console.log(this.name + '说 Hi');},sayHello: () => {console.log(this.name + '说 Hello');}
}me.sayHi()
me.sayHello()

内置对象

内置对象 BOM DOM

https://www.runoob.com/jsref/obj-window.html

事件对象 $event 重点）

常见事件

v-on @keydown

事件	描述
鼠标、键盘事件
onclick	点击鼠标时触发此事件
ondblclick	双击鼠标时触发此事件
onmousedown	按下鼠标时触发此事件
onmouseup	鼠标按下后又松开时触发此事件
onmouseover	当鼠标移动到某个元素上方时触发此事件
onmousemove	移动鼠标时触发此事件
onmouseout	当鼠标离开某个元素范围时触发此事件
onkeypress	当按下并松开键盘上的某个键时触发此事件
onkeydown	当按下键盘上的某个按键时触发此事件
onkeyup	当放开键盘上的某个按键时触发此事件
	三个事件的执行顺序是： keydown – keypress — keyup
窗口事件
onabort	图片在下载过程中被用户中断时触发此事件
onbeforeunload	当前页面的内容将要被改变时触发此事件
onerror	出现错误时触发此事件
onload	页面内容加载完成时触发此事件
onmove	当移动浏览器的窗口时触发此事件
onresize	当改变浏览器的窗口大小时触发此事件
onscroll	当滚动浏览器的滚动条时触发此事件
onstop	当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件
oncontextmenu	当弹出右键上下文菜单时触发此事件
onunload	改变当前页面时触发此事件
表单事件
onblur	当前元素失去焦点时触发此事件
onchange	当前元素失去焦点并且元素的内容发生改变时触发此事件
onfocus	当某个元素获得焦点时触发此事件
onreset	当点击表单中的重置按钮时触发此事件
onsubmit	当提交表单时触发此事件

$event 事件对象

写法: 不传参数 showMsg( e v e n t ) 传参数： s h o w M s g ( a a a , event) 传参数：showMsg(aaa, event)传参数：showMsg(aaa,event) 多个参数：showMsg(aaa,bbb,$event) 有参数时，放在最后一个参数位置上

属性方法	说明	使用
e.target	返回触发事件的对象（标准）
e.srcElement	返回触发事件的对象（非标准 ie6-ie8）
e.type	返回触发事件的类型如：click,mouseover
e.cancelBubble	阻止冒泡非标准 ie6-ie8	e.cancelBubble = true;
e.returnValue	该属性阻止默认方法(默认行为)，非标准 ie6-ie8
e.preventDefault()	该方法阻止默认方法(默认行为)，标准
e.stopPropagation()	该方法阻止冒泡标准	e.stopPropagation()

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><div @click="showMsg('1',$event)">你好 </div></div><script type="text/javascript">let app = new Vue({el:'#app',data() {return {message: "hello world!"}},methods: {showMsg(e) {console.log(e.type);e.target.style.background = 'yellow'}},})</script></body>
</html>

v-if v-show 区别 v-show display none v-if false 彻底不渲染

v-for: (item,index) in lists 循环数组 item 代表数组本身 index 是数组索引

v-model:

标题

DIV 不能绑定v-model v-model 表单元素上

v-bind 和 v-model 相同点:数据绑定区别 1 v-bind单向绑定元素属性 v-model 双向绑定表单元素的值 2 v-bind 所有元素 v-model 表单元素上

操作DOM $refs (重点)

关于dom操作，vuejs的思想：通过操作数值，来操作dom对象。 v-if= isShow data：{isShow }

ref 被用来给HTML 元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><div @click="showMsg('1',$event)">你好 </div><div id="me" ref='refme'>我是沈国福</div><div id="you" ref='refyou'>你是田华</div></div><script type="text/javascript">let app = new Vue({el:'#app',data() {return {message: "hello world!"}},mounted() {// 1 通过操作dom对象// document.getElementById('me').style.background = 'yellow'// 2 $refs对象,保存的是,当前页面所有具有ref属性的dom对象集console.log(this.$refs);this.$refs.refme.style.background = 'yellow'},methods: {},})</script></body>
</html>

表单特殊元素的绑定

textarea 的双向数据绑定

我们之前讲过 input 的双向数据绑定

textarea 也可以进行双向数据绑定

checkbox 的双向数据绑定

checkbox 也可以双向数据绑定, 不过绑定的值, 最好是布尔值

如果是多个 checkbox, 建议把变量做成数组, 同时一定要有 value 属性和它的值

选中状态:

     <div id="app">我的兴趣爱好:<br><input type="checkbox" name="fav" v-model="checkboxValue" value="1" /> 看书<input type="checkbox" name="fav" v-model="checkboxValue" value="2" /> 抽烟<input type="checkbox" name="fav" v-model="checkboxValue" value="3" /> 喝酒<input type="checkbox" name="fav" v-model="checkboxValue" value="4" /> 烫头<button type="button" @click="submit">提交</button></div><hr><script>let vm = new Vue({el: '#app',// vddata() {return {checkboxValue: [],}},mounted() {this.getCheck()},// vmmethods: {getCheck() {this.checkboxValue = ["2", "3"]},submit() {console.log(this.checkboxValue);}},});</script>

radio 的双向数据绑定

单选框也可以做双向数据绑定, 绑定的变量给一个空字符串即可

<div id="app"><!-- 复选框 -->我的兴趣爱好:<br><input type="checkbox" name="fav" v-model="checkboxValue" value="1" /> 看书<input type="checkbox" name="fav" v-model="checkboxValue" value="2" /> 抽烟<input type="checkbox" name="fav" v-model="checkboxValue" value="3" /> 喝酒<input type="checkbox" name="fav" v-model="checkboxValue" value="4" /> 烫头<button type="button" @click="submit">提交</button><hr><!-- 单选 --><h1>性别1: {{radioValue}}</h1>男:<input v-model="radioValue" type="radio" name="sex" value="男" /> 女:<input v-model="radioValue" type="radio"    name="sex" value="女" />待定:<input v-model="radioValue" type="radio" name="sex" value="待定" /></div><script>let vm = new Vue({el: '#app',// vddata() {return {textarea: "",checkboxValue: [],radioValue: ''}},// vmmethods: {submit() {console.log(this.radioValue);}},});</script>

下拉框的双向数据绑定

下拉框也可以进行双向数据绑定,变量可以给一个空字符串

如果牵涉到默认选中状态, 可以修改 selectValue 的值

如果想把第一项变成提示信息, 可以这么写

<select v-model="selectValue"><option value="" disabled>请选择你的城市</option><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option>
</select>

如果 option 的数据不是写死的, 而是从后台传过来的, 我们可以在变量中定义 option 的值

<!DOCTYPE html><body><div id="root"><h1>城市: {{selectValue}}</h1><select v-model="selectValue"><option value="" disabled>请选择你的城市</option><option v-for="item in ajaxValue" :value="item.value">{{item.text}}</option></select></div></body></html>

CURD案例（优化）

1 优化项目简介改单击查看按钮弹出对话框通过传递数组下标[索引] 来获取数据

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><script src="js/axios.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="css/style.css" /><style type="text/css">html,body,#app {height: 100%;}.mask {display: flex;flex-direction: column;justify-content: center;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .7);z-index: 999;}.mask .intro {width: 500px;height: 250px;background-color: #FFFFFF;padding: 10px;}.mask .header {text-align: center;}.mask .header span {float: right;cursor: pointer;}</style></head><body><div id="app"><h1>{{title}}</h1><hr><div class="query">项目名称：<input type="text" v-model="projectName" /><button class="btn" type="button" @click="getUserList()">查询</button><button class="btn" type="button" @click="clearAll()">重置</button><button class="btn green" type="button" @click="goAdd()">增加</button></div><div class="tb"><table><tr><th style="width: 50px;">项目ID</th><th style="width: 80px;">项目名称</th><th style="width: 50px;">项目经理</th><th style="width: 50px;">建设年份</th><th style="width: 50px;">建设方式</th><th style="width: 50px;">使用单位</th><th style="width: 50px;">开发商</th><th style="width: 200px;">项目简介</th><th style="width: 80px;">操作</th></tr><tr v-for="item,index in projects" :key="item.projectId"><td class="mid">{{item.projectId}}</td><td>{{item.projectName}}</td><td>{{item.projectManager}}</td><td>{{item.projectYear}}</td><td>{{item.projectMode}}</td><td>{{item.projectUser}}</td><td>{{item.projectDevelopers}}</td><td><button class="btn" type="button" @click="showIntro(index)">查看</button></td><td class="mid"><button class="btn" type="button" @click="goEdit(item.projectId)">修改</button><button class="btn red" type="button" @click="delUser(item.projectId)">删除</button></td></tr></table><div v-if="projects.length == 0" class="tishi">未找到任何记录！</div></div><!-- 模态框的动态切换 用v-show  --><div class="mask" v-show="isIntroShow" @click="hiddenIntro"><div class="intro"><div class="header">{{ maskProjectName }}-简介<span @click="hiddenIntro">❌</span></div><hr><div class="content">{{ maskProjectIntro }}</div></div></div></div><script>let vm = new Vue({el: "#app",data: {title: '项 目 台 账',projectName: '',projects: [],isIntroShow: false,maskProjectName:'',maskProjectIntro:''},mounted() {this.getUserList();},methods: {/*** 弹出介绍模态框*/showIntro(index) {this.isIntroShow = trueconsole.log(index);this.maskProjectName = this.projects[index].projectNamethis.maskProjectIntro = this.projects[index].projectIntro},/*** 隐藏介绍模态框*/hiddenIntro() {this.isIntroShow = false},getUserList() {axios({url: "http://api.0315e.com/tsg/projects",params: {projectName: this.projectName}}).then((res) => {this.projects = res.data.result;})},clearAll() {this.projectName = null;this.getUserList();},goAdd() {window.location.href = "addUser.html";},goEdit(projectId) {window.location.href = "editUser.html?" + projectId;},delUser(projectId) {let ok = confirm("确定要删除ID为" + projectId + "的项目吗？");if (ok == true) {axios({url: "http://api.0315e.com/tsg/projects",method: "DELETE",data: {projectId}}).then((res) => {alert(res.data.msg);if (res.data.code == 200) {this.getUserList();}})}}}});</script></body>
</html>

2 添加项目总数的显示

<h2>当前项目总数:{{ projects.length}}</h2>

3 新增和修改合并为单页面

4 新建和修改部分字段采用select 和 radio双向绑定

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><script src="js/axios.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="css/add.css" /></head><body><div id="app"><h1>{{title}}</h1><hr><div class="new">项目名称：<input type="text" v-model="projectName" /><br>项目经理：<select v-model="projectManager"><option value ="" disabled="true">---请选择---</option><option :value="item.managerId" v-for="(item,index) in projectManagers">{{ item.managerName }}</option></select><br>建设年份：<input type="text" v-model="projectYear" /><br><span style="float: left; padding-left: 57px;">建设方式：</span><span v-for="(item,index) in projectModes"><input type="radio" name="projectModes" v-model="projectMode" :value="item.typeId"  /> {{item.typeName}}</span><br>使用单位：<input type="text" v-model="projectUser" /><br>开&nbsp;&nbsp;发&nbsp;&nbsp;商：<input type="text" v-model="projectDevelopers" /><br>项目简介：<textarea v-model="projectIntro"></textarea><br><button class="btn" type="button" @click="addUser()">确定</button><button class="btn" type="button" @click="clearAll()">重置</button><button class="btn" type="button" @click="goIndex()">返回</button></div></div><script>let vm = new Vue({el: "#app",data: {title: '新 增 项 目',projectName: '',projectManager: '',projectYear: '',projectMode: '',projectUser: '',projectDevelopers: '',projectIntro: '',projectManagers:[],projectModes:[]},mounted() {this.getManagers()this.getType()},methods: {/*** 获取项目经理列表*/getManagers(){axios({url:'./data/managers.json'}).then((res) => {console.log(res.data.result);this.projectManagers = res.data.result})},/*** 获取项目建设类型列表*/getType(){axios({url:'./data/projecttype.json'}).then((res) => {console.log(res.data.result);this.projectModes = res.data.result})},addUser() {axios({url: "http://api.0315e.com/tsg/projects",method: "POST",data: {projectName: this.projectName,projectManager: this.projectManager,projectYear: this.projectYear,projectMode: this.projectMode,projectUser: this.projectUser,projectDevelopers: this.projectDevelopers,projectIntro: this.projectIntro}}).then((res) => {alert(res.data.msg);this.goIndex();})},clearAll() {this.projectName = null;this.projectManager = null;this.projectYear = null;this.projectMode = null;this.projectUser = null;this.projectDevelopers = null;this.projectIntro = null;},goIndex() {window.location.href = "index.html";}}});</script></body>
</html>

5 按id 姓名排序

sort(e) {this.orderFlag = !this.orderFlagif (this.orderFlag == true) {this.projects.sort(function(a, b) {return b.projectId - a.projectId})e.target.innerText = "⬆"} else {this.projects.sort(function(a, b) {return a.projectId - b.projectId})e.target.innerText = "⬇"}
},

6 过滤显示

4/14作业要求

1 做项目简介的按钮项目总数的展示

2 将新建和修改页面中的部分字段采用select 和 radio展示

3 开发方式和开发商联动 1 当开发方式是自研开发商只能有科技公司,; 2 当外委模式,没有科技公司

select onchange事件-> 当值==自研开发商列表数组,要去掉其他三个

华东电子
济南洋溢
唐山连拖
科技公司

修饰符

事件修饰符

v-on

事件冒泡:多个事件从里到外逐步触发,这个过程叫做事件冒泡
.stop 组织事件冒泡
<div @click="showMsg('爷爷')"><div @click="showMsg('爸爸')"><div @click.stop="showMsg('儿子')"><div @click="showMsg('孙子')">click me!</div></div></div>
</div>
.capture 捕获事件，从外到里
<div @click="showMsg('爷爷')"><div @click.capture.stop="showMsg('爸爸')"><div @click="showMsg('儿子')"><div @click="showMsg('孙子')">click me!</div>
</div>
</div>
</div>
``.prevent` .prevent 阻止默认行为 a href 阻止表单的提交行为前后端分离 form submit方法

.self <li @click.self=“gotoPage()”> 当点击到li的自己可视化区域内,才触发事件;如果点击li下的button区域,则不会触发li的gotoPage事件

.once 在当前页面的生命周期内执行一次

.passive

表单元素修饰符

v-model

.number 将输入框的值转为number类型
.lazy 输入框失去焦点后才进行绑定
.trim 自动将字符串的前后空格去掉

按键修饰符

比如我们想要在 input 中输入值以后, 按回车触发对应事件, 可以使用@keydown.enter="函数名", 同理, 也可以监听tab, delete, esc, up, down, left, right

<input type=“password” name="" id="" value="" @keydown.esc=“submit” />
keydown 当按下键盘上的某个按键时触发此事件
keyup 当放开键盘上的某个按键时触发此事件
keypress 当按下并松开键盘上的某个键时触发此事件

VUE七大属性

挂载属性 el

数据属性 data

方法属性 methods

过滤属性 filter

// 过滤属性 过滤器
filters: {// 1 自研  2外委displayMode: function(value) {if (value == 1) {return "自研"} else if(value == 2){return "外委"}else {return value}},
},

计算属性 computed（重点）

//  计算属性定义的方法有缓存:也就是在一个周期内,如果它的依赖项不发生变化的话,那么它的值会被缓存,不重复执行. 节省开支.
// 计算属性是基于它们的响应式依赖进行缓存的 计算属性,它是多对一
getFullNameByCom: function() {console.log('这是来自计算属性的调用');return this.firstName + this.lastName
}

侦听属性：watch

watch: {// 一对多 data 指 我们要侦听的变量名 // 普通的字符串 firstName(newValue, oldValue) {console.log(newValue, oldValue);},// 对象  deep true 有些问题user: {handler: function(val, oldVal) {console.log(val, oldVal);},deep: true},// 观测对象的属性变化 要对象.属性 用引号抱起来'user.name'(newValue, oldValue) {console.log(newValue, oldValue);}
},

模板属性：template

它会替换掉当前实例的dom内容

template: <img src="img/fire.png" >

样式处理-class和style

动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div>

动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>V-FOR</title><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">html,body,#app {height: 100%;}.boxtext {font-size: 200px;}.box1 {width: 300px;height: 300px;background-color: #7FFF00;}.box2 {width: 300px;height: 300px;background-color: #ff557f;}.boxborder {border: 1px solid red;}</style></head><body><div id="app"><!-- :class 动态绑定 类1 对象写法<div :class="{ 'is-active': true, 'red': isRed }"></div>2 数组写法直接写类名 字符串<div :class="['is-active', isRed ? 'red' : '' ]"></div>--><!-- <div class="" :class="{'box1':isclass,'boxborder':isboxborder}">box1</div> --><div :class="[isboxborder?'box2':'box1']">box2</div><button type="button" @click="changeIsboxborder">给box 添加/删除边框的类</button><br></div><script type="text/javascript">let vm = new Vue({el: '#app',data() {return {isclass: true,isboxborder: false}},methods: {changeIsboxborder() {this.isboxborder = !this.isboxborder}},})</script></body>
</html>

动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div>

动态style数组：<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>V-FOR</title><script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script><style type="text/css">html,body,#app {height: 100%;}.listCss {width: 600px;margin: 0 auto;}.activeCss {background-color: blueviolet;}</style></head><body><div id="app"><!-- 绑定style1 对象方式<div :style="{ color: textColor, fontSize: '18px' }"></div>如果 css 属性名中有 - 的属性,如font-size,我们在:style的时候,要修改成fontSize这种小驼峰命名法的名字涉及属性值中,有单位的,需要拼接字符串 fontSize: fontSize+'px'涉及属性值中,有单位有括号的, transform:'rotate('+ plane.pos +'deg)'2 数组方式动态style数组：`<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>`--><!-- 单击高亮某行--><div :style="{fontSize: fontSize+'px'}">ABC</div><div class="listCss" v-for="(item,index) in listArr" :key="index" @click="activeVar=index":class="{'activeCss':activeVar==index}">{{index}}--{{item}}</div><div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]">今天是礼拜天,可是还得上课</div><button @click="changedivcolor" type="button">改变颜色</button><button @click="jia" type="button">+</button><button @click="jian" type="button">-</button></div><script type="text/javascript">let vm = new Vue({el: '#app',data() {return {listArr: ["张三","李四","王五","赵六"],activeVar:null,textColor: 'red',fontSize: 20}},methods: {changedivcolor() {this.textColor = 'green'},jia() {this.fontSize += 5},jian() {this.fontSize -= 5}},})</script></body>
</html>

列表高亮

<div class="listCss" v-for="(item,index) in listArr" :key="index"
@click="activeVar=index" :class="{'activeCss':activeVar==index}">{{item}}</div>

两个问题:

1 watch深度监听不到对象的属性

如果是直接修改的对象的属性值，是检测不到的，需要重新对对象进行赋值。

user1: {handler(val, oldVal) {console.log(val, oldVal);},deep: true
},

2 按中文排序 localeCompare 有点不正常

是因为某些汉字是多音字

2 Vue.js进阶

生命周期_钩子函数（重点）

在某一时刻, 自动执行的函数

https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html

组件

组件通讯

3 Vue-CLI工程

4 Vue插件-Router路由

5 Vue插件-Vuex 状态管理