v-model的实质
- v-model的实质是利用表单元素的属性和事件。
view--->data //从页面中更改的数据，利用该元素触发的事件，处理数据层中的数据。
data--->view //数据层的数据发生改变，更改该元素对应的属性，改变页面中的数据。
或许你应该去了解一下html元素的dom对象（js对象）
v-model在不同类型的表单元素中的效果
text
- 对于
<input type='text'>，它的value属性控制页面上输入框的文本展示，输入时触发input事件。所以v-model就利用这些特性实现双向数据绑定。
接下来的说明，input表示对应元素的dom对象，data代表数据层中的data对象。
<input v-model="message" placeholder="edit me">// 显示：hhj
<p>Message is: {{ message }}</p> //hhj
...(data)
{message : 'hhj'}
- 初始时，v-model把data.message的值赋给input.value，所以输入框的值为hhj。
- 当输入'hc'时，触发input事件，v-model把input.value的值赋给data.message，所以页面上显示'hc'。
checkbox
- 对于
<input type='checkbox '>，它的checked属性控制着页面上的勾选框是否勾选，点击勾选框时触发change事件。所以v-model就利用这些特性实现双向数据绑定，但是要注意对于单个复选框和多个复选框实现的方式不一样。
单个复选框
<input type="checkbox" id="checkbox" v-model="checked"> // 未勾选
<label for="checkbox">{{ checked }}</label> //false
...(data)
｛checked：false}
- 初始时，v-model先会判断data.checked的类型，如果是Boolean，说明是单个复选框模式。然后把data.checked的值赋给input.checked，所以呈现为未勾选状态。
- 当点击勾选框时，触发change事件，并且
input.checked=!input.checked，v-model把input.checked的值赋给data.checked，所以页面上显示true。
多个复选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> //勾选
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">// 未勾选
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">// 未勾选
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>// Checked names: [ "Jack" ]
...(data)
{
checkedNames: ['Jack']
}
- 初始时，v-model先会判断data.checked的类型，如果是Array，说明是多个复选框模式。然后拿data.checked数组中的值，与复选框的value属性比较，如果数组中有一样的值，则把该复选框的checked值赋予true，所以id为jack的复选框呈现为勾选状态。
- 当点击勾选框时，触发change事件，并且对应的复选框
input.checked=!input.checked，v-model把input.checked的值给丢进data.checkedNames，所以页面上出现勾选的值。
<label for="id">text</label> 用来实现标签与<input/>的绑定，对于不同类型的input有不同的效果，例如：type=checkbox时，点击标签名与点击复选框一样。for绑定<input/>的id。
