1:v-model是什么?
语法糖。不够详细?实现数据双向绑定的语法糖!
2:v-model的本质?
既然是实现数据双向绑定,那么如果不使用v-model该怎么实现?请看下面栗子:
<div id="app">
<input type="text" v-bind:value="defaultValue" v-on:input="setDefaultValue($event.target.value)">
</div>
let vm = new Vue({
el: '#app',
data: {
defaultValue: 'Vue bidirectional data binding'
},
methods:{
setDefaultValue(value){
this.defaultValue = value
}
}
})
- data中初始化定义变量defaultValue;
- 输入框上绑定此初始化变量defaultValue,则实现了数据的单向流动;
- 监听输入框的input事件,并绑定用于更新初始化变量defaultValue的setDefaultValue事件,并传入输入框value;
- setDefaultValue将出入框value值赋值给defaultValue,这里即实现数据双向流动;
- 使用语法糖后<input type="text" v-model="defaultValue">;
以上就是关于对v-model语法糖的认知,如有歧义,望指正。