v-model是一个用于表单数据的双向绑定（input和textarea经常使用到v-model），其实相当于两个指令：
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
1. Vue中经常v-model实现数据的双向绑定，它会根据控件的类型自动选取正确的方法来更新元素。
2. v-model实际上是一个语法糖，比如
<input v-model="test">本质上是<input :value="test" @input="test=$event.target.value">，
其中@input是对input事件的一个监听，:value="test"是将监听事件中的数据放到input中。
3. v-model不仅可以赋值给input，还可以获取input的数据。而且是实时的。
比如：
<div id="app">
<input v-model="test">
<!--input的内容变化会同时让p的内容变化-->
<p>{{test}}</p>
</div>
let vm = new Vue({
el:"#app",
data:{
test:"这是一个测试"
}
})
4. v-model在下拉框、单选按钮和复选按钮中的应用
value值是传值的关键
- 下拉框
<div id="app">
<select name="fruit" v-model="selected">
<option value="选中A">A</option>
<option value="选中B">B</option>
<option value="选中C">C</option>
</select>
<p>{{selected}}</p>
</div>
let vm = new Vue({
el:"#app",
data:{
selected:"未选择"
}
})
v-model之下拉框
- 单选按钮
<div id="app">
<!--value的作用是点击选中的时候，将value的值通过v-model传给picked-->
<label><input type="radio" v-model="picked" name="size" value="small_picked">small</label>
<label><input type="radio" v-model="picked" name="size" value="big_picked">big</label>
<p>{{picked}}</p>
</div>
let vm = new Vue({
el:"#app",
data:{
picked:"未选择"
}
})
v-model之单选框
- 复选按钮（"checked"一定要数组，不能是字符串）
<div id="app">
<label><input type="checkbox" v-model="checked" value="one_check">选项1</label>
<label><input type="checkbox" v-model="checked" value="two_check">选项2</label>
<label><input type="checkbox" v-model="checked" value="three_check">选项3</label>
<p>{{checked}}</p>
</div>
let vm = new Vue({
el:"#app",
data:{
checked:[] //复选按钮要用数组，不能用字符串
}
})
v-model之复选框
5. v-model修饰符
v-model可以和.lazy .trim .number等这些修饰符一起使用。
- .lazy（延迟加载）
在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步，只有当焦点移除input的时候，才会同步数据。
<input v-model.lazy = "msg">
- .trim
去除字符串的首尾空格
<input v-model.trim = "msg">
- .nember
将数据转化为值类型
<input type="number" v-model.number="age">
6. 自定义组件使用v-model的操作
- 接收一个
value prop - 触发input事件，并传入新的值
在原生表单元素中
<input v-model="inputValue">
相当于
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">
在自定义组件中
<my-component v-model="inputValue"></my-component>
相当于
<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>
这时inputValue接受的值就是input事件回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还要使用$emit去触发input的事件。
this.$emit('input', value)
