详解vue中v-model的实现原理
作者：生活在北极的企鹅
v-model可以实现数据的双向绑定,也是vue的最突出的优势,其实 v-model 实际上是一个语法糖,本文将给大家介绍一下vue中v-model的实现原理,文中有相关的代码供大家参考,具有一定的参考价值,需要的朋友可以参考下
这是一个一直很经典的面试题 咱们废话不多说
v-model可以实现数据的双向绑定,也是vue的最突出的优势。其实 v-model 实际上是一个语法糖。其中原理很简单，只要就是两部分，一个是事件监听，一个是属性绑定。等下会用代码来展示这两部分。举个v-model实现数据双向绑定的例子：
<body>
<div id="app">
<p>展示value1: {{ value1 }}</p>
<input type="text" v-model="value1" />
</div>
</body>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
value1: ""
}
})
</script>
从上代码可以看出，当我在输入框输入的值改变的时候，所展示的内容也会改变；
<body>
<div id="app">
<p>展示value1: {{ value1 }}</p>
<input type="text" v-model="value1" />
<p>绑定的数据为：{{value2}}</p>
<input type="text" :model="value2" @input="changeVal" />
</div>
</body>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
value1: "",
value2: ""
},
methods: {
changeVal(e) {
console.log(e.target.value, '我输入的值在改变');
this.value2 = e.target.value;
}
}
})
</script>
由上代码所述 他的操作原理是 先监听数值改变 然后在进行赋值；
<div id="root">
单向数据绑定【v-bind:value】: <input type="text" v-bind:value="name" /><br />
双向数据绑定【v-model:value】: <input type="text" v-model:value="name" /><br />
单向数据绑定【:value】: <input type="text" :value="name" /><br />
双向数据绑定【v-model】: <input type="text" v-model="name" />
</div>
<script src="./js/vue.min.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el: '#root',
data: {
name: 'JOJO'
}
})
</script>到此这篇关于详解vue中v-model的实现原理的文章就介绍到这了,更多相关vue v-model实现原理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！