Vue.js 双向数据绑定v-model的使用【笔记】

1、Vue.js中可以使用v-model指令在表单<input>、<textarea>及<select>元素上创建双向绑定，它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖，它负责监听用户的输入事件以及更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中初始值。

2、v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea元素使用 value 属性和 input 事件；
• checkbox 和radio使用 checked 属性和 change 事件；
• select字段将 value 作为 prop 并将 change 作为事件。

注意：对于需要使用输入法（如中文、日文、韩文）的语言，你会发现v-model不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。

3、v-model在不同控件中的用法：

在input中使用：（textarea用法相同）

<div id="app">
	<input type="text" v-model="msg">
	<p>{{msg}}</p>
</div>

var vm = new Vue({
	el: "#app",
	data:{
		msg: "",
	}
});

在radio中使用：

<div id="app">
	<input type="radio" id="one" value="One" v-model="picked">
	<label for="one">One</label>
	<input type="radio" id="two" value="Two" v-model="picked">
	<label for="two">Two</label>
</div>

var vm = new Vue({
	el: "#app",
	data:{
		picked: ""
	}
});

在checkbox中使用：可能选中多个元素，则使用[]进行保存。

<div id="app">
	<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
	<label for="jack">Jack</label>
	<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
	<label for="jack">Jack</label>
	<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
	<label for="jack">Jack</label><br>
	<span>Checked Names：{{ checkedNames }}</span>
</div>

var vm = new Vue({
	el: "#app",
	data:{
		checkedNames: []
	}
});

4、如果想对控件中的默认值进行初始化，则我们可以对data中的变量值进行改变，从而实现对控件的默认值的设置。

5、如果想对表单中的值进行提交操作，可以获取data中的值进行提交即可。