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

1:v-model是什么?

语法糖。不够详细?实现数据双向绑定的语法糖!

2:v-model的本质?

既然是实现数据双向绑定,那么如果不使用v-model该怎么实现?请看下面栗子:

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.  使用语法糖后

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

你可能感兴趣的:(Vue)