一：v-model指令
1. v-model指令默认触发的是input事件，当文本框的值发生变化后，离开同步给数据
添加了.lazy修饰符，可以将input事件转为change事件
.trim修饰符，用于去掉内容的首尾空格
<div>
姓名：<input type="text" v-model.lazy.trim="name">开始{{name}}结束
</div>
2. v-model绑定一组单选框，每个单选框指定相同的属性
性别：
<input v-model="sex" type="radio" value="男" name="sex">男
<input v-model="sex" type="radio" value="女" name="sex">女
<span style="color: red">{{sex}}</span>
</div>
3. .number修饰符，会自动将你的输入转为number
年龄：<input type="text" v-model.number="age">{{age+20}}
</div>
4. v-model绑定单个复选框，绑定一个boolean值
是否同意：<input type="checkbox" v-model="isOk">{{isOk}}
</div>
5. v-model绑定多个个复选框，绑定同一个数组
爱好：
<input v-model="hobbies" type="checkbox" value="抽烟">抽烟
<input v-model="hobbies" type="checkbox" value="喝酒">喝酒
<input v-model="hobbies" type="checkbox" value="烫头">烫头
<input v-model="hobbies" type="checkbox" value="打游戏">打游戏
<input v-model="hobbies" type="checkbox" value="敲代码">敲代码
<input v-model="hobbies" type="checkbox" value="睡觉">睡觉
<input v-model="hobbies" type="checkbox" value="看电影">看电影
<span style="color: red;">{{hobbies}}</span>
</div>
6. 绑定一个属性
``` <div>
<!-- 绑定一个数组 -->
喜欢的食物：
<select multiple v-model="foods">
<option value="苹果">苹果</option>
<option value="面包">面包</option>
<option value="香蕉">香蕉</option>
<option value="蛋糕">蛋糕</option>
<option value="草莓">草莓</option>
<option value="咖啡">咖啡</option>
<option value="葡萄">葡萄</option>
</select>
{{foods}}
</div>
##二、绑定事件
1. @是v-on:的简写，通过v-on:指令绑定事件，指定一个methods选项里面的定义的方法， 调用方法时，不传参数，默认会将事件对象作为参数传递
v-on:事件名.修饰符 = 方法名() | 方法名 | 简单的JS表达式
简写： @事件名.修饰符 = 方法名() | 方法名 | 简单的JS表达式
事件名： click|keydown|keyup|mouseover|mouseout|自定义事件名
修饰符： .stop | .prevent | .once | .self | .left | .right | .middle | .up| .down | .keyCode | .keyAlias | .native | .passive
示例：
```<button @click="sayHi">sayHi</button> ```
调用方法时，传递是什么参数，接的就是什么参数
```<button @click="sayHello('hello')">sayHello</button>
调用方法时，传递一个$event参数，该参数就是事件对象
```<button @click="sayNice('Nice',$event)">sayNice</button>```
2. 事件绑定类型
//单事件、单方法
v-on:事件名.修饰符 = "方法名()" | "方法名" | "简单的JS表达式"
//单事件、多方法
v-on:事件名.修饰符 = "[方法名1(), 方法名2()]"
//多事件、多方法
v-on:事件名1.修饰符=方法名1 v-on:事件名2.修饰符=方法名2
v-on = "{'事件名1':方法名1， '事件名2':方法名2}"
3.原理： 既不是属性赋值，也不是事件监听，完成的是事件的回调
<p id="p2" v-on:click="show()">vue事件解释</p>
//v-on会默认为绑定事件提供一个默认函数，事件赋值只是将赋值的函数作为默认函数的内部的回调函数进行执行
//为了让事件和vue对象产生关联
let pDom2=document.getElementById("p2");
pDom2.addEventListener("click",function(){
show();
})
4.参数传递
事件的参数传递: 遵循JS的方法传参规则，同时可取vue实例仓库的变量
页面方法绑定时的 参数 this：会被vue直接重写为指向于 window的对象
vue 将事件源对象 封装成了 $event，事件源为$event.target
```<input type="button" value="传递参数event" v-on:click="printEvent($event)">```
5. (1)当前事件处理的代码比较简单时，可以将代码直接写在行内，注意：只能操作Vue管理的数据
``` <button @click="age++">年龄++</button> ```
(2)事件修饰符.prevent，用于阻止默认行为
```<div class="box" @contextmenu.prevent="showbox">
box
</div>
(3).once，用只绑定一次事件方法
<div class="one" @click.once="one">
(4).stop，用于阻止事件冒泡
<div class="two" @click.stop="two"></div>
(5).self，只能在自身元素上触发，不同在子元素上触发
<div class="box2" @click.self="showbox2">
<div class="box3"></div>
</div>
(6)每次键盘弹起都会调用事件方法
<div>
请输入搜索关键字：<input type="text" @keyup="keyup">
</div>
(7)只在回车时，才会调用事件方法
<div>
请输入搜索关键字：<input type="text" @keyup.enter="keyup1">
</div>
(8) //阻止默认行为
// e.preventDefault()
(9) // 阻止事件冒泡
// e.stopPropagation();
三、深度响应式
例子：
<div id="app">
<div>
姓名：<input type="text" v-model="name">{{name}}
</div>
<div>
学生信息：
<input type="text" v-model="obj.name">
<input type="text" v-model.number="obj.age">
<button @click="addSex">添加性别</button>
<button @click="delAge">删除年龄</button>
<br>
{{obj}}
</div>
<div>
数组：{{arr}}
<button @click="addArr">添加数据</button>
<button @click="delArr">删除数据</button>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el:'#app',
data:{
//基本类型数据
name:'张三',
//对象类型数据
obj:{
name:'张三',
age:20,
},
arr:[11,22,33,44,55]
},
methods: {
//添加性别
addSex(){
// obj对象里面的每一个属性，都会采用Object.defineProperty去封装，实现响应式
// 所谓响应式，指的是，数据发生变化后，页面自动更新。
// 给对象后添加的数据不会采用Object.defineProperty去封装，所以，就失去了响应式。
// this.obj.sex = '男'
// vue通过$set方法，给对象添加响应式属性
this.$set(this.obj,'sex','男')
},
//删除年龄
delAge(){
// 采用delete关键字删除对象的属性后，也没有触发页面更新
// delete this.obj.age
// vue通过$delete方法，删除对象的属性，并触发响应式
this.$delete(this.obj,'age')
},
//添加数组的数据
addArr(){
// this.arr[5] = 66 //注意：采用这种方式，不会触发页面更新
// 在vue中，操作数组，并触发页面更新只能使用数组的以下方法：
// push,pop,unshift,shift,splice,reseolve,sort
// this.arr.push(66)
// 如果想通过下标操作数组，也必须要使用$set和$delete方法
this.$set(this.arr,5,66)
},
delArr(){
// this.arr.splice(2,1)
this.$delete(this.arr,2)
}
},
})
</script>
