一：v-model
1.绑定一个文本框
姓名: <input type="text" v-model.lazy.trim="name">{{name}}
lazy 修饰符在文本框失去焦点的时候才触发响应式 更新数据
.trim 修饰符 去除文本首尾空格
2.年龄: <input type="text" v-model.number="age">{{age+20}}
.number 自动将 输入的内容转为number 类型
3.v-model 绑定一组单选框指定相同的属性
性别: <input v-model="sex" type="radio" value="男" name="sex">男
<input v-model="sex" type="radio" value="女" name="sex">女
<span>{{sex}}</span>
4 绑定单个复选框框 可以绑定布尔值
是否同意: <input type="checkbox" v-model="isok">{{isok}}
5. 绑定多个复选框 可以绑定同一个数组
爱好：
<input type="checkbox" v-model="hobbies" value="吃饭">吃饭
<input type="checkbox" v-model="hobbies" value="睡觉">睡觉
<input type="checkbox" v-model="hobbies" value="打豆豆">打豆豆
<input type="checkbox" v-model="hobbies" value="上网">上网
<input type="checkbox" v-model="hobbies" value="打游戏">打游戏
<span>{{hobbies}}</span>
6. 绑定一个选择框 绑定一个属性
你所在的城市： <select name="" id="" v-model="city" >
<option value="南京">南京</option>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="南昌">南昌</option>
</select>
<span>{{city}}</span>
7. 绑定一个选择框 可以绑定一个数组 可以多选 multiple 可以选择多个
你喜欢吃什么 <select name="" id="" multiple v-model="foods">
<option value="西瓜">西瓜</option>
<option value="面包">面包</option>
<option value="牛奶">牛奶</option>
<option value="葡萄">葡萄</option>
<option value="瓜皮">瓜皮</option>
</select>
<span>{{foods}}</span>
二： v:on <!-- @是v-on:的简写，通过v-on: 指令绑定事件，指定一个methods选项里面定义的方法 -->
1. 调用方法时，不传参数 默认会将事件对象当做参数传递
<button @click="sayHi">sayHi</button>
2.可以传参 调用方法传递的是什么参数 接的就是什么参数
<button @click="sayHello('hello')">sayHello</button>
3. 调用方法时，想要传递两个及以上参数，传递一个$event参数，该参数就是事件对象
<button @click="sayNice('nice',$event)">sayHello</button>
4. 当事件代码处理的比较简单的时候，直接写在行内，但是只能操作vue 管理的数据
<button @click="age++">年龄++</button>
三.事件修饰符
1.事件修饰符 .prevent 用于阻止默认行为
右击默认会弹出一个框 加上.prevent就不会弹出
<div class="box" @contextmenu.prevent='showbox'>阻止默认事件</div>
2.事件修饰符 .once 用于事件只触发一次
<div class="one" @click.once="one"></div>
3.事件修饰符 .stop用于阻止冒泡(如果不阻止点击会two 会先执行two 在执行one)
<div class="one" @click="one">
<div class="two" @click.stop="two"></div>
</div>
四.按键修饰符
键盘事件有两个keydown keyup（用的比较多）
一共有9个按键修饰符，分别是：
.enter 是回车键
.tab 是tab键
.delete 是删除键和退格键
.esc 是退出键
.space 是空格键
.up 是上箭头
.down 是下箭头
.left 是左箭头
.right 是右箭头
按键修饰符 .enter 只有在回车的时候才会去执行 也可以写code编码
请输入关键字 <input type="text" @keyup.enter="keyup1">
请输入关键字 <input type="text" @keyup.13="keyup1">
