一、v-model指令
1、基础用法
v-model 指令在表单 、{{address}}
vue-v-model指令&绑定事件&深度式响应
（3）绑定单选框
绑定一组单选按钮，每个单选按钮通过v-model绑定相同的属性。
性别：
男
女
{{sex}}
（4）复选框
① 绑定单个复选框（返回布尔值）
单个复选框，绑定到布尔值
是否同意：{{isOk}}
② 绑定多个复选框（返回数组）
绑定多个复选框，通过v-model绑定同一个数组
爱好：
吃饭
睡觉
打豆豆
学习
追剧
逛街
{{hobbies}}
（5）选择框
① 绑定单项选择框
城市：
{{city}}
② 绑定多项选择框（绑定到一个数组）
下拉框设置multiple属性后，就可以选择多个项。
按住Ctrl键实现多项选择
喜欢的食物：
{{foods}}
效果如下所示：
image.png
2、修饰符
（1）.lazy
v-model指令默认触发的是input事件，当文本框的值发生变化时，离开同步给数据。
添加.lazy修饰符，可以将input事件转为change事件
（2）.number
自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
{{age+10}}
（3）.trim
自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
二、绑定事件
通过v-on:指令绑定事件，@ 是v-on的简写。
1、事件绑定方法
（1）绑定事件不传参
通过v-on:指令绑定事件，指定一个methods选项里面的定义的方法。
调用方法时，不传参数，默认会将事件对象作为参数传递
（2）绑定事件传参
调用方法时，传递的是什么参数，接的就是什么参数
（3）绑定事件传参+事件对象
如果我们传递了一个参数，还想再传递事件对象参数，就要通过$event关键字设置参数，该参数就是事件对象。
2、行内编写
如果当前事件处理的代码比较简单，就可以将代码直接写在行内。
注意：只能操作Vue管理的数据
3、事件修饰符
（1）.prevent
在事件处理程序中调用 event.preventDefault() 阻止默认行为。
Vue中可以通过.prevent事件修饰符，阻止默认行为。
（2）.stop
在事件处理程序中调用 event.stopPropagation() 阻止事件冒泡。
Vue中可以通过.stop事件修饰符，阻止事件冒泡。（绑定给子元素）
（3）.once
表示点击事件将只会触发一次。
.once 修饰符还能被用到自定义的组件事件上。
（4）.self
只能在自身元素上触发，不能在子元素上触发
3、按键修饰符
Vue针对键盘事件，提供了按键修饰符。按键修饰符也可以用按键码（keyCode）代替，例如.enter可以用.13代替。（注意：Vue3中取消了按键码）
一共有9个按键修饰符，分别是：
.enter 是回车键
.tab 是tab键
.delete 是删除键和退格键
.esc 是退出键
.space 是空格键
.up 是上箭头
.down 是下箭头
.left 是左箭头
.right 是右箭头
请输入搜索关键字：
请输入搜索关键字：
三、深度式响应
Vue实例在初始化的时候，会将obj对象身上的所有数据，采用Object.defineProperty去封装，做响应式处理。所谓响应式，指的是数据发生变化后，页面自动更新。
但是给对象后添加的数据不会采用Object.defineProperty去封装，所以就不再具备响应式能力了。
实现后添加的数据也具备响应式能力，有以下两种方式:
① 通过Vue的set方法，更新指定的对象属性或数组成员；delete方法，删除指定对象的属性或数组的成员。
② 通过Vue实例的delete方法，删除指定对象的属性或数组的成员。
1、更新对象
set方法的参数分别是：指定的对象，对象的属性，属性值。
delete方法的参数分别是：指定的对象，对象的属性。
学生信息：
{{obj}}
let vm = new Vue({
el:'#app',
data:{
obj:{
name:'张三',
age:20,
}
},
methods: {
// 添加性别
addSex(){
// 使用普通方法给对象后添加的属性，失去了响应式
// this.obj.sex = '男'
// vue通过set方法，给对象添加响应式属性
// Vue.set(this.obj,'sex','男')
// vue实例通过$set方法，给对象添加响应式属性
this.$set(this.obj,'sex','男')
},
// 删除年龄
delAge(){
// 采用delete关键字删除对象的属性后，没有触发页面更新
// delete this.obj.age
// Vue的delete方法，删除对象的属性，并触发响应式
// Vue.delete(this.obj,'age')
// vue实例通过$delete方法，删除对象的属性，并触发响应式
this.$delete(this.obj,'age')
}
},
})
2、更新数组
在vue中，操作数组只能通过以下方法，才能实现响应式：push()、pop()、unshift() 、shift()、splice()、reverse()、sort()。
如果想通过下标直接操作数组，也必须要使用Vue的sett和delete方法或者Vue实例的delete方法。
set方法的参数分别是：指定的数组，数组的下标，对应的数据。
delete方法的参数分别是：指定的数组，数组的下标。
数组：{{arr}}
let vm = new Vue({
el:'#app',
data:{
arr:[11,22,33,44,55]
},
methods: {
// 修改数组身上的成员
updateArr(){
// 注意：直接利用索引设置数组项，不会触发页面更新
// this.arr[1] = 32
// vue通过set方法，可以利用索引直接设置一个数组项
// Vue.set(this.arr,1,32)
// vue实例通过$set方法，可以利用索引直接设置一个数组项
this.$set(this.arr,1,32)
},
// 添加数组的数据
addArr(){
// this.arr[5] = 66 // 注意：采用这种方式，不会触发页面更新
// vue通过set方法，给数组添加响应式数据
// Vue.set(this.arr,5,66)
// vue实例通过$set方法，给数组添加响应式数据
this.$set(this.arr,5,66)
},
// 删除数组的数据
delArr(){
// 采用delete关键字删除数组下标为2的元素后，没有触发页面更新
// delete this.arr[2]
// vue通过delete方法，给数组删除数据，并触发响应式
// Vue.delete(this.arr,2)
// vue实例通过$delete方法，给数组删除数据，并触发响应式
this.$delete(this.arr,2)
}
},
})