一、v-model指令和修饰符：
1.v-model指令双向绑定的注意事项：
（1）、v-model指令默认触发的是input事件，当文本框的值发生变化后，立刻同步给数据
（2）、 v-model绑定一组单选框，每个单选框指定相同的属性
（3）、v-model绑定单个复选框,绑定一个boolean值 v-model绑定多个复选框,绑定同一个数组
（4）、单选菜单 绑定一个属性 多选菜单 绑定一个数组
2.修饰符：
.lazy-----可以将input事件转换为change事件
.trim-----用于去掉内容首尾的空格
<input type="text" v-model.lazy.trim='name'>{{name}}
通过修饰符.lazy 表单中本来因为双向绑定而同步变化的value和data中的name属性会在离开input表单窗口后再同步
.number-----用于将字符串转为数字
<input type="text" v-model.number='age'>
data中的age传过来的数字是字符串的形式 加上.number后就又是数字了 可以进行运算
二、绑定事件、事件修饰符：
1.v-on: 缩写是@ 绑定事件的注意事项：
解释以下就是当绑定了事件后对方法不穿参数，那么就会默认传一个事件对象 e 进去
可以通过console.log(e)来查看
如果传了参数那么方法在运行时就会接收到这个参数
比如在上述代码中 运行sayHello方法时会有个 hello 出现
$event 参数 就是事件对象
2.绑定样式行内式写法：
3.事件修饰符：
（1）、.stop修饰符，用于阻止事件冒泡 子盒子的事件不会传给父盒子
等同于在方法中写 e.stopPropagation();//阻止事件冒泡
（2）、.prevent修饰符，用于阻止默认行为
等同于在方法中写 e.preventDefault();//阻止默认事件
（3）、.once修饰符，用于只绑定一次事件方法(只能调用一次 后面在点击就无效了)
（4）、.self修饰符，只能在自身元素上触发，不能在子元素身上触发
这个有点类似于冒泡，区别在于这个是 父盒子的事件不会在点击子盒子时触发
三、深度响应式和按键修饰符：
1.按键修饰符：
Vue针对键盘事件，提供了按键修饰符。
一共有9个按键修饰符，分别是：
.enter 是回车键
.tab 是tab键
.delete 是删除键和退格键
.esc 是退出键
.space 是空格键
.up 是上箭头
.down 是下箭头
.left 是左箭头
.right 是右箭头
2.深度响应式：
根据图中的代码进行一步步分析
（1）、addSex（）方法中，使用 this.obj.sex ='男' 来给data中的obj对象增加属性。
这样添加的属性不会采用Object.defineProperties去封装，所以，就失去了响应式。
所以对data中的obj有影响但是对页面没有影响，页面不会更新。
通过$set方法 this.$set(this.obj,'sex','男') 可以给对象添加响应式属性。
（2）、delAge（）方法与上述同理
delete this.obj.age 删除obj中的age属性 并没有响应式 所以页面不会刷新
而通过$delete方法 this.$delete(this.obj,'age')，删除对象的属性，并触发响应式
（3）、addArr（）方法是要给data中的arr数组添加元素
this.arr[5]=66 这个方法不触发页面更新
特别注意：
在vue中，操作数组，并触发页面更新只能使用数组的以下方法： push(),pop () ,unshift () ,shift () ,splice () ,reverse () ,sort ()
所以：
this.arr.push(66) 和 this.$set(this.arr,5,66)
这两个方法其实都可以在改变数据的同时刷新页面
（4）、delArr（）方法删除arr数组中的第三位（下标为2）用splice截取一位
this.arr.splice(2,1) 和 this.$delete(this.arr,2) 就同上，都能够在改变数据的同时刷新页面
四、深度响应式小练习：
截图有点麻烦直接上代码了 大致意思就是通过this.$set（）方法和this.$delete（）方法给data中的对象添加及删除属性和属性值
<body>
<div id="app">
<div>
{{obj}}
</div>
<div>
属性：<input type="text" v-model='key'>
</div>
<div>
属性值：<input type="text" v-model='value'>
</div>
<div>
<button @click='add'>添加属性</button>
</div>
<div>
属性：<input type="text" v-model='key2'>
</div>
<button @click='del'>删除属性</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
obj:{
},
key:'',
value:'',
key2:''
},
methods:{
add(){
//设置的效果为添加或者修改 如果对象没有这个属性 就添加 如果有 就修改
//设置obj对象的key属性值为value
this.$set(this.obj,this.key,this.value)
},
del(){
this.$delete(this.obj,this.key2)
}
}
})
</script>
</body>
