純粋な JS を使用して vue.js で双方向バインディング機能を実装する方法

純粋な JS を使用して vue.js で双方向バインディング機能を実装する方法

下のスクリーンショットをご覧ください

これは通常の HTML ファイルであり、Vue.js は導入されていません。コードの中に何か見覚えのあるものはありますか?たとえば、「v-model」、「v-on:click」、およびよく使用される「二重中括弧 {{}}」代入ステートメントなどです。

まず、双方向バインディングを実装するアイデアについて説明します。

1. 上記の wslVue オブジェクトのようなカスタム Vue js オブジェクトを作成します。初期化メソッドで必要なパラメータは、(1) マウントする DOM オブジェクト ID、(2) カスタム Vue オブジェクト (JSON オブジェクト) のデータ属性、(3) シミュレートされたマウント方法が後で追加されます。 (ここではパラメータ(1)と(2)が役立ちます。パラメータ(3)は、Vueオブジェクトの初期化作業がすべて完了した後にレンダリング(マウント)メソッドのコールバックを実行できることを前提とするために使用できます)。

2. vue 属性データ json オブジェクトの set メソッドと get メソッドを書き換えます。同時に、data 配下のすべての属性を vue オブジェクトに追加し、vue 生成属性の set メソッドと get メソッドを書き換えて、メソッド内で data の set メソッドと get メソッドを直接実行します (目的は、vue オブジェクト属性の読み取りと書き込みを dom 操作に直接使用することです)。

3. HTML を解析し、HTML 内のタグ ノードとテキスト ノードを再編成します (ここでの具体的な再編成とは、Vue 命令と {{}} 代入記号を通常の HTML ドキュメントに変換して出力することです)。解析プロセス中に、操作する必要がある各ノード (例: input タグ input) のキャッシュ、ロジックのバインド、リスニング イベントの追加を行います。

これらの機能を実装するための js の主な方法について説明します。

1. js オブジェクトのプロパティのメソッドを設定および取得します。

2. document.createDocumentFragment HTML フラグメント解析。

3. 関連する正規表現に基づいて HTML コード スニペットを再編成します。

最終的にどのようなツール クラスを作成する必要がありますか?

1. Vue オブジェクト。

2. オブザーバークラス Watcher は、操作する必要があるノードと、属性が変更されたときに実行する必要があるコールバックメソッドを保存します。

3. すべてのオブザーバー Watcher の管理クラス Dep を管理し、データの変更に関連する Watcher のコールバック レンダリングを制御します。

Vue双方向バインディングの実装

Vueオブジェクトの初期化メソッド

注:

1: data 内のすべてのプロパティを vue オブジェクトに追加し、set メソッドと get メソッドを書き換えます。

2: vue オブジェクトにメソッド管理メソッド オブジェクトを追加します。HTML を解析して v-on:click メソッドを取得するときに、タグにクリック イベント メソッド本体を追加します。

3: ここで HTML を解析します。解析中に処理が必要なノードに遭遇した場合は、Watcher オブジェクトを作成し、関連するノードと指示を Watcher オブジェクトに保存し、Watcher オブジェクトをオブザーバー管理クラスの Dep コレクションに追加します。

4: 初期化が完了したらマウントし、指定された DOM 要素に完全な HTML をレンダリングします。

コンパイルクラス解析には対応するDOMのマウントが必要

すべてのノードを取得する

特定の指示を解析する

ラベル要素とテキスト内容の判断

ここでタグノードの場合、内部のv-onおよびv-model命令を解析する必要があります。

vモデル

v-on:クリック

赤い線は、vue オブジェクト内のメソッドと一致するメソッドで、現在のノードにクリック イベントを追加します。

ノードがテキスト コンテンツの場合、内部の {{}} ディレクティブを解析する必要があります。

概要: ここで多くの Watcher オブジェクトが作成されます。オブジェクトは現在の vue オブジェクト、ノード、データ変更コールバックを保存し、Dep 管理クラスに保存されるため、データが変更されると、レンダリングのためにメソッド コールバックが直接実行されます。

具体的な指示判断

Watcher および Dep オブジェクト

最後にマインドマップを描きます

結論: 基本的な考え方はこれで終わりです。複雑なロジックはなく、表現力も限られています。これが皆様のお役に立てば幸いです。また、一緒に進歩していけるよう、マスターからの批判や訂正も受け付けます。

以上が、純粋な JS で vue.js の双方向バインディング機能を実装する方法の詳細です。vue の双方向バインディングを実装する JS の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード
  • Vue2.x における双方向バインディングの原理と実装
  • フロントエンドフレームワーク Vue における親子コンポーネントデータの双方向バインディングの実装
  • Vue の双方向イベントバインディング v-model の原理についての簡単な説明
  • Vue2.0でデータの双方向バインディング機能をjsを使って実装する
  • Vue双方向バインディングの詳細な説明

<<:  MySQL スロークエリを通じて MySQL のパフォーマンスを最適化する方法

>>:  Nginx 設定場所のマッチング優先順位の簡単な分析

推薦する

iframeを指すaタグのターゲットの名前とIDの違い

コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...

MySQL シリーズ データベース設計 3 つのパラダイム チュートリアルの例

目次1. データベース設計の3つのパラダイムに関する知識の説明1. デザインパラダイムとは何ですか?...

順序再構築に関する簡単な説明: MySQL シャーディング

目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...

Linux で docker-compose を使用したソフトウェア構成の詳細な説明

序文この記事では、docker-compose の構成をいくつか紹介します。これらを参考にして、独自...

ffmpeg 中国語パラメータの詳細な説明

FFMPEG 3.4.1 バージョンパラメータの詳細使用方法: ffmpeg [オプション] [[入...

Adobe Brackets の簡単な使い方のグラフィックチュートリアル

Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...

Dockerコンテナの個別展開のためのLNMPの実装

1. 環境整備各コンテナの IP アドレス: nginx: 172.16.10.10マイSQL: 1...

ユーザーエクスペリエンスの要素またはWebデザインの要素

システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...

CSS のオーバーフロー:hidden エラーの解決方法

失敗の原因今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があ...

html、xhtml、xmlの違い

開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...

mysql charset=utf8 本当に意味が分かりますか

1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...

バントリストコンポーネントをスクロールしても、スクロールバーの位置は保持されます。

バントリストコンポーネントをスクロールするときに、スクロールバーの位置が保持されます。これは、kee...

写真とテキストによる MySQL 8.0.21 インストール チュートリアル

1. ダウンロードリンクをダウンロードするダウンロードをクリックします。Oracle アカウントにロ...

Vue大画面表示適応方法

この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...

フロントエンド開発一般マニュアル(ツール、Webサイト、経験などを含む)

今日は何もすることがなかったので、いくつかのツール(オンラインとクライアント)、よく使用する URL...