下のスクリーンショットをご覧ください これは通常の 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 設定場所のマッチング優先順位の簡単な分析
コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...
目次1. データベース設計の3つのパラダイムに関する知識の説明1. デザインパラダイムとは何ですか?...
目次1. 目的2. 環境整備1. 基本情報2. データベース環境の準備3. データベースを構築し、サ...
序文この記事では、docker-compose の構成をいくつか紹介します。これらを参考にして、独自...
FFMPEG 3.4.1 バージョンパラメータの詳細使用方法: ffmpeg [オプション] [[入...
Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...
1. 環境整備各コンテナの IP アドレス: nginx: 172.16.10.10マイSQL: 1...
システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...
失敗の原因今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があ...
開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...
1. まずテーブル作成ステートメントを見てみましょう テーブル学生を作成( sid int 主キー ...
バントリストコンポーネントをスクロールするときに、スクロールバーの位置が保持されます。これは、kee...
1. ダウンロードリンクをダウンロードするダウンロードをクリックします。Oracle アカウントにロ...
この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...
今日は何もすることがなかったので、いくつかのツール(オンラインとクライアント)、よく使用する URL...