1.1.1 原理分析
v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。
v-model的实现原理大致是,通过Object.defineProperty()方法来实现Vue数据的属性的绑定,一旦监听到数据变化,则更新数据关联的虚拟DOM树,当然在模版编译的时候,为指令v-model绑定input事件,当输入的内容发生改变时,同步更新data中绑定的数据。
1.1.2 实现
我们可以通过给input框绑定一个input事件来模拟实现数据的双向绑定的效果
<div id="app">
<p>{{msg}}</p>
<p>
<input type="text" v-bind:value="msg" v-on:input="change">
</p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
msg:'hi vuejs'
}
},
methods:{
change(event){
console.log(event);
this.msg=event.target.value
}
}
})
预览:
等价于:
<div id="app">
<p>{{msg}}</p>
<p>
<input type="text" v-model='msg' v-on:input="change">
</p>
</div>
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
//模板选择器
el:'#app',
//数据中心
data(){
return{
msg:'hi vuejs'
}
},
methods:{
change(event){
console.log(event);
}
}
})
</script>