下のスクリーンショットをご覧ください これは通常の 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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL スロークエリを通じて MySQL のパフォーマンスを最適化する方法
>>: Nginx 設定場所のマッチング優先順位の簡単な分析
SQL を使用してデータを抽出する場合、テーブル内で重複した値に遭遇することがよくあります。たとえ...
使用シナリオ:プロジェクトのページでは、頻繁に変更されず、個別のカスタマイズも伴わない大量のデータを...
目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...
目次1. 基本概念2. データベース管理技術の開発3. リレーショナルデータベース(RDBMS)の概...
目次負荷分散に nginx を使用するための 2 つのモジュール:アップストリームはロードノードプー...
この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...
順序なしリストでは、順序なしリストのシンボルは各リストの前に表示されるドットです。順序付きリスト o...
1. VPSとCentOSシステムを購入しましたが、サーバーの時間が北京時間と一致せず、時差があるこ...
SQL実行ステップの詳細な分析まず、ステートメントが実行される順序を見てみましょう。 (8)選択する...
目次1. 範囲1. グローバルな範囲2. ローカルスコープ2. 変数のスコープ1. グローバル変数2...
以下の情報はインターネットから収集したものです1. アンカーは、Web ページ作成におけるハイパーリ...
[概要] この記事では、自作の Docker プラットフォームをベースに完全な ELK システムを素...
まず: <abbr> または <acronym>これら 2 つの記号は同じ意...
この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...
サーバーのデータベース ハード ディスク領域がいっぱいだったため、大量のデータの書き込みに失敗し、「...