V-model指令
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model设置单项框默认按键
<div>
<!-- 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>
v-model设置复选框按钮
<div>
<!-- v-model绑定单个复选框，绑定一个boolean值 -->
是否同意：<input type="checkbox" v-model="isOk">{{isOk}}
</div>
<div>
<!-- v-model绑定多个个复选框，绑定同一个数组-->
爱好：
<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>
修饰符
.lazy .trim
v-model指令默认触发的是input事件，当文本框的值发生变化后，离开同步给数据，
添加了.lazy修饰符，可以将input事件转为change事件 （change事件当元素的值发生改变时，会发生 change 事件。）
添加了.trim修饰符，用于去掉内容的首尾空格
<div>
姓名：<input type="text" v-model.lazy.trim="name">开始{{name}}结束
</div>
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
// .number修饰符，会自动将你的输入转为number
年龄：<input type="text" v-model.number="age">{{age+20}}
内联处理器中的方法
- @是v-on:的简写，通过v-on:指令绑定事件，指定一个methods选项里面的定义的方法，
调用方法时，不传参数，默认会将事件对象作为参数传递
<button @click="sayHi">sayHi</button>
- 调用方法时，传的是什么参数，接的就是什么参数
<button @click="sayHello('hello')">sayHello</button>
- 调用方法时，传递一个$event参数，该参数就是事件对象
<button @click="sayNice('Nice',$event)">sayNice</button>
- 当前事件处理的代码比较简单时，可以将代码直接写在行内，注意：只能操作Vue管理的数据
<div>
年龄：{{age}}
</div>
<button @click="age++">年龄++</button>
事件修饰符
.prevent - 用于阻止默认行为
<div class="box" @contextmenu.prevent="showbox"> box</div>
.once - 用只绑定一次事件方法 ，.stop，用于阻止事件冒泡
<div class="one" @click.once="one">
<!-- .stop，用于阻止事件冒泡 -->
<div class="two" @click.stop="two"></div>
</div>
.self，只能在自身元素上触发，不同在子元素上触发
<div class="box2" @click.self="showbox2">
<div class="box3"></div>
</div>
}
按键修饰符
共有：.enter(回车) ，.tab（切换） ， .delete（shanchu ） ， .esc(取消) ， .space（空格） , .up（方向上） ， .down（方向下） ， .left（方向下） ， .right （方向右）
请输入搜索关键字：<input type="text" @keyup.enter="keyup1">
深度响应式
<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>
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')
}
