Vue の双方向イベントバインディング v-model の原理についての簡単な説明

v-model は Vue の双方向バインディング命令であり、ページ上のコントロール入力の値を関連するバインドされたデータ属性に同期的に更新したり、データバインディング属性を更新するときにページ上の入力コントロールの値を更新したりすることができます。

公式ドキュメントでは次のように説明されています。

v-modelは単なる構文糖であり、実際の実装は

v-bind: レスポンシブデータをバインドする
入力イベントをトリガーしてデータを渡す（コアとフォーカス）

次のコード

<input v-model="txt">

本質的に

<input :value="txt" @input="txt = $event.target.value">

説明する：

vueインスタンスが初期化されると、データの各プロパティが再帰的に走査され、各プロパティのgetメソッドとsetメソッドがdefinePropertyを通じて監視されるため、プロパティが再割り当てされると、変更を監視して対応するページコントロールを操作できます。

以下のコードを見てください。

Object.defineProperty(データ、名前、{
        得る（）{
            データ["name"]を返します。
        },
        set(newVal){
            val = data["name"]とします。
            場合 (val === newVal) {
                戻る;
            }
            データ["名前"]=newVal;
            // 属性値の変更をリッスンします。ノードが対応する入力ノードの場合、node.value=newVal;
        }    
    })

要約する

一方、モーダルレイヤーは Object.defineProperty を通じて各プロパティをハイジャックし、変更が検出されると、関連するページ要素を通じて更新されます。一方、テンプレートファイルをコンパイルすることで、入力イベントがコントロールのv-modelにバインドされ、ページ入力は関連するデータ属性値をリアルタイムで更新できるようになります。

Object.defineProperty は、読み取りおよび書き込み権限や列挙の可否など、オブジェクトのプロパティの特別な操作を制御するために使用されます。ここでは、主に、対応する 2 つの説明プロパティ get と set について学習します。v-model は、実際に get および set 操作を書き換えます。get は、name 属性の値を読み取ることによってトリガーされる関数であり、set は、name 属性の値を設定することによってトリガーされる関数です。

補充する

v-model 修飾子: .lazy、.trim、.number

lazy: 各入力イベントがトリガーされた後、入力ボックスの値がデータと同期され、lazy修飾子が追加されて、同期に変更イベントを使用するように変換されます。

<input v-model.lazy="msg">

トリム: 文字列の先頭と末尾からスペースを削除します

<input v-model.trim="msg">

数値: データを値型に変換する

<input v-model.number="msg">

Vue の双方向イベントバインディング v-model の原理に関するこの記事はこれで終わりです。Vue の双方向イベントバインディング v-model に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: