Vue语法原理:v-model实现原理
vue中的v-model能够实现数据的双向绑定,也是vue的最突出的优势,其中的原理其实很简单,主要包括属性绑定和事件监听两部分,废话不多说,先举个v-model实现数据双向绑定的例子:<div id="app"><p>v-model绑定的数据为:{{value1}}</p><input type="text" v-model="value1">&l
·
vue
中的v-model
能够实现数据的双向绑定,也是vue的最突出的优势。其实v-model
实际上是一个语法糖。其中的原理很简单,主要包括属性绑定
和事件监听
两部分,废话不多说,先举个v-model实现数据双向绑定的例子:
<div id="app">
<p>v-model绑定的数据为:{{value1}}</p>
<input type="text" v-model="value1">
</div>
<script src="./lib/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
value1: ''
}
})
</script>
实现的效果如下:
当你在input
输入框中输入内容的时候,上面p标签里面的数据实时发生变化(实际上是value1
这个数据发生了响应式变化)。相反改变代码中value1
值,input
输入框中值也会实时变化。
其原理实现如下:
<div id="app">
<p>v-model绑定的数据为:{{value1}}</p>
<input type="text" v-model="value1">
++ <p>绑定的数据为:{{value2}}</p>
++ <input type="text" :value="value2" @input="changeVal">
</div>
<script src="./lib/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
value1: '',
++ value2: ''
},
++ methods: {
++ changeVal (e) {
++ this.value2 = e.target.value
++ }
++ }
})
</script>
实现效果与v-model相同:
解释:
- 首先
input
输入框通过属性绑定:value="value2"
得到响应数据value
。(model → view) - 定义一个
changeVal
函数,通过e.target
得到input框中的value值。 - 最后
input
输入框通过@input
事件监听,绑定changeVal
函数,将input框中的value值传给value2
。(view → model)
更多推荐
已为社区贡献1条内容
所有评论(0)