【Vue】怎么理解Vue中双向数据绑定v-model?

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
      }
    }
})
  1. data中初始化定义变量defaultValue;
  2. 输入框上绑定此初始化变量defaultValue,则实现了数据的单向流动;
  3. 监听输入框的input事件,并绑定用于更新初始化变量defaultValue的setDefaultValue事件,并传入输入框value;
  4. setDefaultValue将出入框value值赋值给defaultValue,这里即实现数据双向流动;
  5.  使用语法糖后<input type="text" v-model="defaultValue">;

以上就是关于对v-model语法糖的认知,如有歧义,望指正。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章