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

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

DOM を直接変更して操作する js や jQuery とは異なり、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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VUEのデータプロキシとイベントの詳細な説明
  • Vue の動的コンポーネントとグローバル イベント バインディングの概要の詳細な説明
  • Vue フィルターの使用とタイムスタンプ変換の問題
  • Vue フィルターの実装と適用シナリオの詳細な説明
  • Vue のデータとイベントのバインディングとフィルターの詳細な説明

<<:  Mysql の大きな SQL ファイルの高速リカバリ ソリューションの共有

>>:  Linux ファイルとユーザー管理の実践

推薦する

クロスブラウザローカルストレージⅠ

原文: http://www.planabc.net/2008/08/05/userdata_beh...

docker-compose ネットワーク設定についての簡単な説明

ネットワーク使用チュートリアル公式サイト docker-compose.yml リファレンスドキュメ...

Centos7 サーバーで jar パッケージ プロジェクトを開始する最良の方法

序文Linux 上で jar パッケージを実行する方法は誰もが知っています。なぜ別々に話したいのでし...

見栄えの良い CSS カスタム スタイル (タイトル h1 h2 h3)

レンダリングBlog Gardenでよく使われるスタイル /*タイトル h1 h2 h3 スタイル*...

HTML タグ tbody の使い方と説明

tbody 要素は、thead 要素および tfoot 要素と組み合わせて使用​​する必要があります...

CentOS7 上で KVM 仮想化プラットフォームを構築する (3 つの方法)

KVM はカーネルベースの仮想マシンの略で、Linux をハイパーバイザーに変換する Linux ...

Linux での Redis の永続性、マスター スレーブ同期、Sentinel の詳細な説明

1.0 Redis の永続性Redis はメモリ内データベースです。サーバー プロセスが終了すると、...

MySQL の分離レベルの包括的な分析

データベースが同じデータ バッチを同時に追加、削除、および変更すると、ダーティ書き込み、ダーティ読み...

MySQL パーティションテーブルのベストプラクティスガイド

序文:パーティショニングはテーブル設計パターンです。一般的に、テーブル パーティショニングとは、条件...

MySQL のストレージ エンジンの違いと比較

MyISAM ストレージエンジンMyISAM は ISAM ストレージ エンジンに基づいており、それ...

Vueはボトムクエリ関数を実装します

この記事では、ボトムクエリ機能を実装するためのVueの具体的なコードを例として紹介します。具体的な内...

Vue はトークンを取得してトークン ログインのサンプル コードを実装します

ログイン認証にトークンを使用する考え方は次のとおりです。 1. 初めてログインする場合、フロントエン...

ミニマルなウェブサイトデザインの例

Web アプリケーション クラス1. みんなのためにダウンまたは私だけのためにこのウェブサイトは、ウ...

Docker プライベート ウェアハウスを構築する (自己署名方式)

作成したイメージを一元管理し、サービスの展開を容易にするために、プライベート Docker リポジト...

Nginx 仮想ホストの詳細な分析

目次1. 仮想ホスト1.1 仮想ホストの概念1.2 仮想ホストタイプ2. IP仮想ホストに基づく2....