【Vue】Vueにおける双方向データバインドv-modelをどのように理解しますか?

873 ワード

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
      }
    }
})
  • dataで定義変数defaultValueを初期化します.
  • 入力ボックスにこの初期化変数defaultValueをバインドすると、データの一方向の流れが実現される.
  • 入力ボックスのinputイベントを傍受し、初期化変数defaultValueを更新するためのsetDefaultValueイベントをバインドし、入力ボックスvalueに入力する.
  • setDefaultValue出入り枠value値をdefaultValueに割り当て、ここでデータの双方向の流れを実現する.
  • 文法糖を使用した後.

  • 以上、v-model文法糖に対する認識について、曖昧さがあれば、指摘してほしい.