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 ファイル サービスを素早く構築する方法
最近、MySQL オンラインでいくつかのデータ異常が発生しましたが、すべて早朝に発生しました。ビジネ...
<br />最も実用的なものを選んで話しましょう。まず、勤務先の都市を慎重に選ぶ必要があ...
よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...
この記事の例では、多人数チャットルームを実装するためのjsコードの具体的なコードを参考までに共有して...
色はあらゆるウェブサイトにとって最も重要な要素の 1 つであり、閲覧者に大きな影響を与えるため、色の...
この記事では、Dockerでイメージ情報を表示する方法を学ぶ必要があります。 1. imagesコマ...
目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...
インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...
次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...
この記事では、Linux yumを使用してmysql5.6をインストールする簡単な手順を参考までに紹...
TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素...
最近、Microsoft は 2019 サーバー システムをリリースしました。一般的に、Micros...
HTML チェックボックスとラジオボタンスタイルの美化の簡単な例チェックボックス: XML/HTML...
目次序文最初のステップ:ステップ2: このmy.iniを変更する要約する序文問題の説明:不正な文字列...
コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...