用法：
可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇，但v-model本质上不过是语法糖。
它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 忽略所有表单元素的 value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
对于需要使用输入法(如中文、日文、韩文等) 的语言，你会发现
v-model不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input事件。
1. #文本 <input> 元素
绑定 value 属性
例子详解：
VUE 部分：新建vue实例，创建并绑定父元素 #div。创建数据属性 text 并设置初始值 null
var vm = new Vue({ el:"#div", data:{ text:null } })
HTML 部分:用 v-model 绑定数据属性 text。{{ text }} 就是输入框的内容（数据）
<div id="div"> <input v-model="text" placeholder="please enter the text" > <p>here is the text: {{text}} </p> </div>
<div id="div"><input v-model="text" placeholder="please enter the text" ><p>here is the text:{{text}}</p></div><script>var vm = new Vue({el:"#div",data:{text:null}})</script>
网页显示效果
2. #多行文本<textarea>
绑定 value值
<div id="div"><textarea v-model="text" placeholder="please enter the text" >在这里写文字会显示吗？-不会显示</textarea><p>here is the text:{{text}}</p></div>
在HTML 的<textarea> （在这里的文字不被显示）</textarea> 元素中间的内容不会被显示
3.# 复选框 <input type="checkbox">
单个选择框绑定 checked值(布尔值)；
多个复选框绑定的是value 值(数组)
<div id="div"><input type="checkbox" id="checkbox" v-model="text" /><label for="checkbox">单个复选框</label><p>这里显示数据属性text 的值（布尔值）:<span id="important">{{text}}</span></p></div><script>var vm = new Vue({el:"#div",data:{text:null}})
1)（单选复选框）例子说明：
绑定 checked 值
用v-model="text" 绑定了text 的数据属性。单个复选框被选中时，text 的值为 true；不被选中时，text 值为 false
<div id="div"><input type="checkbox" id="a" v-model="text" value="apple" /><label for="a">苹果</label><input type="checkbox" id="b"v-model="text" value="banana"/><label for="b">香蕉</label><input type="checkbox" id="c" v-model="text" value="watermelon"/><label for="c">西瓜</label><p>这里显示数据属性 text 的值<br />（原是空数组[ ]，被放入被选中的多选框的value的值）:<span id="important">{{text}}</span></p></div><script>var vm = new Vue({el:"#div",data:{text:[]}})</script>
2)（多选复选框）例子说明：
text 初始值为 空数组 [ ]。选中复选框时，被选中的复选框元素<input > 的 value 值被传入这个数组中
1. 数据属性 text 的初始值是 [ ] 空数组。
var vm = new Vue({
el:"#div",
data:{ text:[ ] }
})
2. 当选中复选框时，{{ text }} 的值是被选中的复选框元素的 value的值（比如说 香蕉 这个<input> 元素设置了value 值是"banana"。当选中这个复选框时，"banana" 这个值被传入了 数据属性 {{text }} 中 ）
<input type="checkbox" id="a" v-model="text" value="apple" />
<label for="a">苹果</label>
4.#单选按钮<input type="radio">
绑定value 值
<div id="div"><input type="radio" id="a" v-model="text" value="apple" /><label for="a">苹果</label><input type="radio" id="b"v-model="text" value="banana"/><label for="b">香蕉</label><input type="radio" id="c" v-model="text" value="watermelon"/><label for="c">西瓜</label><p>这里显示数据属性 text 的值<br />（原是空值，被传入被选中的单选按钮的value的值）:<span id="important">{{text}}</span></p></div><script>var vm = new Vue({el:"#div",data:{text:""}})</script>
<input type="radio" id="a" v-model="text" value="apple" />
<label for="a">苹果</label>
选中单选按钮时，{{ text }} 的值是被选中的单选按钮元素的 value 的值 "apple"
5. # 选择框<select> （单选和多选）
绑定的是子元素<option>元素的value 值
<div id="div"><select v-model="text"><option >apple</option><option>banana</option><option>watermelon</option></select><p>这里显示数据属性 text 的值<br />（原是空值，被传入被选中的<option> 元素的value值）:<span id="important">{{text}}</span><br/><br/>注意：<option>元素没有设置vaule值时，传入的是这个元素中间的文本 </p></div><script>var vm = new Vue({el:"#div",data:{text:""}})</script>
1) 单选<select>
绑定的是子元素<option>元素的value 值
注意：
2) 多选 <select multiple>
绑定的是子元素<option>元素的value 值
<div id="div">
<select multiple v-model="text">
<option >apple</option>
<option>banana</option>
<option>watermelon</option>
</select>
3. v-for 动态渲染 多选 <select multiple>
<div id="div"><select v-model="selectedVal" ><option v-for="option in options">{{option.value}}</option></select><p>这里显示数据属性 text 的值<br />（原是空数组，被传入被选中的<option> 元素的value值）:<span id="important">{{selectedVal}}</span><br/></p></div><script>var vm = new Vue({el:"#div",data:{selectedVal:"",options:[{num:"a",value:"apple"},{num:"b",value:"banana"},{num:"c",value:"cherry"}]}})</script>
例子解析：
1. 因为for 有遍历循环的作用，所以可以利用 v-for 遍历获取数据属性option 数组元素
<option v-for="option in options" v-bind:value="option.value"> {{option.value}} </option>
这里显示的是<opiton> {{option.value}} </opiton>的值。
2. 选中banana时，{{selected}} 的值也改变为 "banana" 。
因为<select> 元素绑定了<select v-model="selectedVal" >。selectedVal 数据属性初始值为空。
当选项选定banana时，select 元素的 value 值就是"banana"。selectedVal 因为双向绑定，值也变成了"banana"
问题：为什么既要用v-bind:value="option.value" 绑定<opiton>元素，还要写<opiton> {{option.value}} </opiton>？
回答：
情况一：不写<opiton> {{option.value}} </opiton>
<select v-model="selectedVal" ><option v-for="option in options" v-bind:value="option.value"></option></select>
var op=document.getElementsByTagName("option");alert("option元素的value值是："+op[0].value+","+op[1].value+","+op[2].value)1. 下拉列表不显示任何值。
2. 但是可以检测到 option 的value 值
情况二：不绑定v-bind:value="option.value"
<select v-model="selectedVal" ><option v-for="option in options" >{{option.value}}</option></select>1. 下拉列表显示了option 的数据属性值。2. 同时可以检测到option的value 值
