vue基础之v-model双向数据绑定原理的浅层解析

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

示例：

<!--双向数据绑定-->
  <div id="app">
  <!--v-model指令表单双向数据绑定-->
    <input type="text" v-model="msg">
	
	<!--v-model指令其实背后有两个指令，v-bind:value 单向绑定data里的数据和v-on:input监听输入框的值然后改变data里面的数据，实现双线绑定-->
    <input type="text" v-bind:value="msg" v-on:input="valChange">
    或者方法写在标签上,使用监听的默认参数$event获取输入框的value。
    <input type="text" v-bind:value="msg" v-on:input="msg = $event.target.value">
    内容：{{msg}}
  </div>
  <script>
  	const app = new Vue({
  		el: '#app',
  		data: {
  			msg: '欢迎使用Vue.js',
  		},
  		methods: {
  			valChange(e) {
  				this.msg = e.target.value;
  			}
  		}
  	})
  </script>

不只是input框：
textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。