Vue の高度な構築プロパティの詳細な説明

1. ディレクティブカスタムディレクティブ

Vue フレームワークのコードでは、ネイティブ DOM 操作はほとんど使用されません。これは、ネイティブ DOM 操作が Vue の命令にカプセル化されているためです。たとえば、先ほど見た <div v-text="xxx"></div> 命令には、実際には次の内部操作があります。

div.innerText = xxx; //もちろん、ここでのdivは取得したDOM要素です

Vue はネイティブ DOM 操作を命令にカプセル化します。要素が命令を使用する場合は、HTML テンプレートの要素タグの属性として直接使用できます。シンプルで便利であり、重複を減らします。

しかし、Vue はすべての DOM 操作を考慮して対応する命令にカプセル化することはできません。開発者が実際に使用するまでわからない DOM 操作もあります。そのため、Vue はユーザーが命令をカスタマイズする方法を提供しており、それは大きく分けて次の 2 種類に分けられます。

カスタム命令はカスタム コンポーネントに似ており、グローバルとローカルに分けられます。以下は、文字y印刷するためのカスタム命令vyを例にしています。

グローバル指令

グローバル プロパティは、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の他の関連記事に注目してください。