一、v-model指令
1.v-model指令默认触发的是input事件，当文本框的值发生变化后，离开同步给数据
添加了.lazy修饰符，可以将input事件转为change事件
.trim修饰符，用于去掉内容的首尾空格
···
<div>
姓名：<input type="text" v-model.lazy.trim="name">开始{{name}}结束
</div>
···
2.v-model绑定一组单选框，每个单选框指定相同的属性
···
<div>
<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
···
<div>
年龄：<input type="text" v-model.number="age">{{age+20}}
</div>
···
4.v-model绑定单个复选框，绑定一个boolean值
···
<div>
是否同意：<input type="checkbox" v-model="isOk">{{isOk}}
</div>
···
二、绑定事件
1.@是v-on:的简写，通过v-on:指令绑定事件，指定一个methods选项里面的定义的方法，
调用方法时，不传参数，默认会将事件对象作为参数传递
···
<button @click="sayHi">sayHi</button>
···
2.调用方法时，传的是什么参数，接的就是什么参数
···
<button @click="sayHello('hello')">sayHello</button>
···
3.调用方法时，传递一个$event参数，该参数就是事件对象
···
<button @click="sayNice('Nice',$event)">sayNice</button>
···
4.当前事件处理的代码比较简单时，可以将代码直接写在行内，注意：只能操作Vue管理的数据
···
<button @click="age++">年龄++</button>
···
5.事件修饰符.prevent，用于阻止默认行为
···
<div class="box" @contextmenu.prevent="showbox">
box
</div>
···
- .once，用只绑定一次事件方法
···
<div class="one" @click.once="one">
···
- .stop，用于阻止事件冒泡
···
<div>
<div class="two" @click.stop="two"></div>
</div>
···
- .self，只能在自身元素上触发，不同在子元素上触发
···
<div class="box2" @click.self="showbox2">
<div class="box3"></div>
</div>
···
9.每次键盘弹起都会调用事件方法
···
<div>
请输入搜索关键字：<input type="text" @keyup="keyup">
</div>
···
10.只在回车时，才会调用事件方法
···
<div>
请输入搜索关键字：<input type="text" @keyup.enter="keyup1">
</div>
···
三、深度响应式
···
//添加性别
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)
}
···
