1. ディレクティブカスタムディレクティブVue フレームワークのコードでは、ネイティブ DOM 操作はほとんど使用されません。これは、ネイティブ DOM 操作が Vue の命令にカプセル化されているためです。たとえば、先ほど見た <div v-text="xxx"></div> 命令には、実際には次の内部操作があります。 div.innerText = xxx; //もちろん、ここでのdivは取得したDOM要素です Vue はネイティブ DOM 操作を命令にカプセル化します。要素が命令を使用する場合は、HTML テンプレートの要素タグの属性として直接使用できます。シンプルで便利であり、重複を減らします。 しかし、Vue はすべての DOM 操作を考慮して対応する命令にカプセル化することはできません。開発者が実際に使用するまでわからない DOM 操作もあります。そのため、Vue はユーザーが命令をカスタマイズする方法を提供しており、それは大きく分けて次の 2 種類に分けられます。 カスタム命令はカスタム コンポーネントに似ており、グローバルとローカルに分けられます。以下は、文字 グローバル指令 グローバル プロパティは、Vue が提供する特定の関数に登録されます。 Vue.directive("y", { 挿入: function(el) { el.addEventListener("click", () => console.log("y")); } }); ローカル指示 ディレクティブを定義するテンプレートでのみ使用できます 完全版のテンプレート属性に含めることができます メイン.js 新しいVue({ テンプレート:` <div vy> <button>クリック</button> </div> `、 ディレクティブ:{ 'y':{ 挿入: function(el) { el.addEventListener("click", () => console.log("y")); } } } }).$mount("#app"); または、不完全なバージョンの.vueファイルのエクスポートデフォルト{}で アプリ <テンプレート> <div> <button vy>クリック</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ ディレクティブ:{ 'y':{ 挿入: function(el) { el.addEventListener("click", () => console.log("y")); } } } }; </スクリプト> ディレクティブオプション 命令オブジェクトには5つの関数属性があります { bind: function (el,info,vnode,oldVnode) {}, //要素がメモリ内に作成されたときに実行されます。 insert: function (パラメータは上記と同じ) {}, //要素がページに挿入されたときに実行されます。 update: function (パラメータは上記と同じ) {}, componentUpdated: 関数 (パラメータは上記と同じ) {}, unbind: 関数 (パラメータは上記と同じ) {} //要素が消えたときに実行} 関数属性パラメータでは、el は命令を呼び出す要素を参照し、info にはすべての情報が含まれます。必要な場合は、info で検索するだけです。 2. ミックスインミックスインの主な目的は、構築オプションの重複を減らすことです。重複する構築オプションを別の *.js ファイルに抽出し、それをインポートしてから、ミックスイン属性を通じて構築オプションにミックスすることができます。 minxin は、単純にコピーするのではなく、追加されたミックスインと現在のオプションに基づいてインテリジェントにミックスされるスマート ミックスインです。 3. 継承を拡張する継承とミックスインは似たような機能を持っていますが、extend の方が抽象的です。どちらも構築オプションの繰り返しを簡素化します。Extend は、元の Vue シェルに基づいて独自に定義されたプロパティを固定プロパティとして追加し、それを使用して Vue オブジェクトを作成するときに Vue を継承するカスタムクラス MyVue を作成できます。 マイビュー 定数MyVue = Vue.extend({ minxins: [ログ] }); デフォルトの MyVue をエクスポートします。 4. 提供して注入する親は共通のデータやメソッドを提供する { //... 提供する(){ 戻る { xx: this.changexx、 yy: これを変更yy } }, 方法:{ チェンジxx(){ //... }, チェンジ(){ //... } } } 子孫はデータを変更するために何かを注入する { 挿入: ["changexx", "changeyy"] } これは .sync 修飾子と少し似ていますが、より一般的です。 以上がVueの高度な構造プロパティの詳細な説明です。Vueの高度な構造プロパティの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL8 でパスワードを忘れた後にパスワードをリセットする方法 (MySQL の古い方法は機能しません)
>>: FileZilla を使用して FTP ファイル サービスを素早く構築する方法
Redux はシンプルな状態マネージャーです。その歴史をたどることはしません。使用法の観点から見ると...
この記事では、登録またはログイン時に電子メール アドレスを入力する際のドロップダウン プロンプトのネ...
前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...
モバイル デバイスでは、金額を表示するために円形の波グラフィックがよく使用されます。最初は、この効果...
背景色の点滅効果を実現するには、次のコードを <body> 領域に追加するだけです。コー...
文法:背景画像: 円錐グラデーション(位置の角度から、開始色、...、最後の色)最初のパラメータ:開...
目次1. 共通機能分類1.1 単一行関数: 1.2 グループ化機能: 2. 単一行関数3. 数学関数...
多くのプロジェクトでは、検証コードの送信など、カウントダウン機能を実装する必要があります。ここで、簡...
前回の記事では、Zabbix のパッシブ、アクティブ、Web 監視に関するトピックについて学習しまし...
Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...
<br />原文: プログレッシブエンハンスメントを理解するアーロン・ガスタフソン翻訳:...
効果上から下へフェードアウト ソースコードhtml、Angular構文を使用して、必要な構文を取得す...
この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...
導入Docker-Compose プロジェクトは、Docker コンテナ クラスターの迅速なオーケス...
目次データベース接続数が急増した理由は何ですか? 1. はじめに2. 知識ポイント3. 練習するIV...