v-mode双向绑定实现原理

111 阅读1分钟

v-model 双向数据绑定的体现 只会体现在UI控件中 只能应用在有value属性的, 语法糖:它是v-bind:value v-on:input的体现

	<div id="app">
		<!-- <input type="text" v-model = 'msg'> -->
		<input type="text" v-bind:value = 'msg' v-on:input = 'valueChange'>
		<h3>{{msg}}</h3>
	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript">
		
		new Vue({
			el:"#app",
			data(){
				return {
					msg:"大😊"
				}
			},
			methods:{
				valueChange(e){
					console.log(e.target.value);
					this.msg = e.target.value;

				}
			}
		});
	</script>