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'}

1. 初始时，v-model把data.message的值赋给input.value，所以输入框的值为hhj。
2. 当输入'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} 

1. 初始时，v-model先会判断data.checked的类型，如果是Boolean，说明是单个复选框模式。然后把data.checked的值赋给input.checked，所以呈现为未勾选状态。
2. 当点击勾选框时，触发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']
  }

1. 初始时，v-model先会判断data.checked的类型，如果是Array，说明是多个复选框模式。然后拿data.checked数组中的值，与复选框的value属性比较，如果数组中有一样的值，则把该复选框的checked值赋予true，所以id为jack的复选框呈现为勾选状态。
2. 当点击勾选框时，触发change事件，并且对应的复选框input.checked=!input.checked，v-model把input.checked的值给丢进data.checkedNames，所以页面上出现勾选的值。

<label for="id">text</label> 用来实现标签与<input/>的绑定，对于不同类型的input有不同的效果，例如：type=checkbox时，点击标签名与点击复选框一样。for绑定<input/>的id。