純粋な 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 設定場所のマッチング優先順位の簡単な分析

推薦する

SQL重複排除方法の概要

SQL を使用してデータを抽出する場合、テーブル内で重複した値に遭遇することがよくあります。たとえ...

Nginx コンテンツ キャッシュと共通パラメータ設定の詳細

使用シナリオ:プロジェクトのページでは、頻繁に変更されず、個別のカスタマイズも伴わない大量のデータを...

JavaScriptを使って動的にテーブルを生成するケースの詳しい説明

目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...

MySQL シリーズ: MySQL リレーショナル データベースの基本概念

目次1. 基本概念2. データベース管理技術の開発3. リレーショナルデータベース(RDBMS)の概...

nginx を使用した負荷分散モジュールの解釈

目次負荷分散に nginx を使用するための 2 つのモジュール:アップストリームはロードノードプー...

CSS で高さが不明な垂直中央揃えを実装する

この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...

CSS で順序付きリスト項目と順序なしリスト項目のスタイルを設定する方法

順序なしリストでは、順序なしリストのシンボルは各リストの前に表示されるドットです。順序付きリスト o...

CentOS サーバーの時間を北京時間に変更する方法

1. VPSとCentOSシステムを購入しましたが、サーバーの時間が北京時間と一致せず、時差があるこ...

SQL実行ステップの詳細な分析

SQL実行ステップの詳細な分析まず、ステートメントが実行される順序を見てみましょう。 (8)選択する...

JavaScriptスコープについての簡単な説明

目次1. 範囲1. グローバルな範囲2. ローカルスコープ2. 変数のスコープ1. グローバル変数2...

HTML ウェブページでのアンカー(名前付きアンカー)の使用の概要

以下の情報はインターネットから収集したものです1. アンカーは、Web ページ作成におけるハイパーリ...

Docker ベースの ELK を素早く構築する方法

[概要] この記事では、自作の Docker プラットフォームをベースに完全な ELK システムを素...

6つの珍しいHTMLタグ

まず: <abbr> または <acronym>これら 2 つの記号は同じ意...

Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]

この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...

myisamchk および mysqlcheck ツールを使用して破損した MySQL データベース ファイルを迅速に修復する方法

サーバーのデータベース ハード ディスク領域がいっぱいだったため、大量のデータの書き込みに失敗し、「...