Vue双向绑定的原理

v-model是Vue中双向绑定的体现

<templete>
	<div>
		<input type="text" v-model="msg" />
		<h3>{{msg}}</h3>
	</div>
</templete>

<script>
export default{
	data(){
		return{
			msg:"",
		}
	}
}
</script>

v-model实现双向绑定主要应用到了两个方法：v-bind:value、v-on:input，下面对上述代码进行改写：

<templete>
	<div>
		<!-- data===>view1 -->
		<input type="text" v-bind:value="msg" v-on:input="value_change"/>
		
		<!-- data===>view2 -->
		<h3>{{msg}}</h3> 
	</div>
</templete>

<script>
export default{
	data(){
		return{
			msg:"",
		}
	},
	methods:{
		// view1==>data
		value_change(e){
			this.msg=e.target.value;//在input框内值发生改变时，对msg进行改变
		}
	}
}
</script>

注：v-model只能用在有 value 属性的标签中