自己对 Vue2.x 中 v-model 指令的理解

v-model 指令

说明：v-model 对<input>、<textarea>、<select>这些表单元素进行双向的数据绑定，实时更新。

数据的绑定通过 v-model 后面接的变量实现的，
如，下列是通过 message 这一变量绑定的

<input type="text" v-model="message" placeholder="edit me">
<p>Message is:{{message}}</p>

（变量 message 要在 vue 的 data 中提前创建好）

在单选、多选和下拉列表<select>中 v-model 数据的获取是通过 value 来获取的，即选中的项，其value值是什么，绑定的数据就是什么
(此处用多选举例)

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
Jack
<input type="checkbox" id="john" value="John" v-model="checkedNames">
John
<input type="checkbox" id="mike" value="2333" v-model="checkedNames">	<!--该选项的 value 值为 2333-->
Mike
<br>
<span>Checked names: {{ checkedNames }}</span>

实际全选后结果如图：

在文本框、多行文本框中，则是与用户输入到文本框的内容进行绑定：

<input type="text" v-model="message" placeholder="edit me">
<p>Message is:{{message}}</p><br /><br /><br />

<textarea cols="30" rows="3" v-model="sentence"></textarea>
<p>句子:{{sentence}}</p>

输入信息：

注：v-model不会获取文本框中 placeholder 的值，具体如下图：

并且在使用了 v-model 的文本框中给 value 赋的值，并不会显示在文本框中，同时 v-model 也不会获取这个值：

<input type="text" value="我没有用 v-model 指令">
<p>Message1 is:{{message1}}</p>
<input type="text" value="我用了 v-model 指令" v-model="message2">
<p>Message2 is:{{message2}}</p>

运行结果如下:

如果有什么问题，或者文章的遗漏之处，欢迎指出，我会积极回复的。