v-model的代码简单实现原理
v-model的代码简单实现原理
v-model是实现数据双向绑定的指令,那么它究竟怎么样实现数据的双向绑定的呢?今天我们就来说一下
今天对v-model又有了些新的理解 所以赶紧记录下来 修改一下以前发的
<!--<input type="text" v-model="message">-->
<!--v-model实现双向绑定 首先理解所谓双向绑定 即是v-model加入绑定一个输入框 通过输入框的输入使得data中被绑定的数据的值改变
这个可以通过绑定input输入框的默认input事件(input事件在用户输入时触发,它是在元素值发生变化时立即触发;)
还有就是data数据中的值改变 可以使input框的value值改变(这个通过v-bind动态绑定数据就可做到)
所以说我们只要通过绑定input事件和value属性就可以做到v-model的双向绑定 -->
<!-- <input type="text" :value="message" @input="changeValue">-->
<input type="text" :value="message" @input="message:$event.target.value">
<h2> {{message}}</h2>
</div>
<script src="../js/vue.js">
</script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods:{
//在我们触发事件的时候浏览器会默认创建一个evnet浏览器对象
changeValue(event){
this.message=event.target.value
}
}
})
简单来说,v-model的双向绑定就是使用绑定value属性和input事件来实现的,只不过对它们两个进行了封装,这就是v-model实现双向绑定的简单实现。如有错误,欢迎各位大佬进行指正。