Vue でのカスタムディレクティブの基本的な使用方法

序文

Vue プロジェクトでは、v-show、v-if、v-for などの組み込み命令をよく使用します。さらに、Vue では、通常の DOM 要素に対して低レベルの操作を実行するための非常に便利なカスタム命令も提供されます。日々の開発をより便利かつ迅速にします。この記事では、カスタム命令の使用方法と一般的なシナリオについてまとめます。

文章

1. グローバル登録

ここでは、ディレクティブをグローバルに登録し、このディレクティブを使用して要素に赤い境界線を追加し、ディレクティブを通じてスタイルを操作します。

<div id="アプリ">
    <h1 type="text" v-red>私は h1 要素です</h1>
    <div v-red>私はdiv要素です</div>
    <p v-red>私は p 要素です</p><br>
    <input type="text" v-red><br>
  </div>
  <スクリプト>
    Vue.directive("赤", {
      // 挿入された命令の定義: function (el) {
        コンソールログ(111);
        el.style.border = "1px 赤一色"
      }
    })
    新しいVue({
      el: "#app",
      データ（） {
        戻る {
        }
      },
      メソッド: {
      }
    })
  </スクリプト>

結果は次のとおりです。

上記のコードでは、Vue.directive メソッドを通じてグローバル ディレクティブが登録されています。この関数は 2 つのパラメータを受け取ります。最初のパラメータはディレクティブ名で、要素内の "v-name" を通じて要素にバインドされます。2 番目のパラメータは、バインドされた要素を処理するフック関数で、後で詳しく説明します。

2. 部分登録

基本的にはグローバル登録ディレクティブと同じですが、スコープが異なります。ここでは、コンポーネント内にバインドされた要素に青い境界線を設定するためのカスタムディレクティブがコンポーネント内に登録されています。

<div id="アプリ">
    <ボーダーアイテム></ボーダーアイテム>
  </div>
  <スクリプト>
    Vue.directive("赤", {
      // 挿入された命令の定義: function (el) {
        コンソールログ(111);
        el.style.border = "1px 赤一色"
      }
    })
    // サブコンポーネントを定義する Vue.component("border-item", {
      ディレクティブ: {
        青：
          // 挿入された命令の定義: function (el) {
            el.style.border = "1px 青一色"
          }
        }
      },
      テンプレート: `<div>
                    <h1 v-blue>私は子コンポーネントの h1 要素です</h1>
                    <div v-blue>私は子コンポーネントのdiv要素です</div>
                    <p v-blue>私は子コンポーネント p 要素です</p><br>
                    サブコンポーネント<input type="text" v-blue><br>
                    <p v-blue>私はサブコンポーネントの h1 要素です。グローバルとローカルの両方のカスタム命令を使用します</p>
                </div>`
    })
    新しいVue({
      el: "#app",
      データ（） {
        戻る {
        }
      },
      メソッド: {
      }
    })
  </スクリプト>

結果は次のとおりです。

上記のコードにより、バインドされた要素に青い境界線を設定するコンポーネントが、ディレクティブ オブジェクトを通じて子コンポーネントに登録されます。オブジェクトはキーと値のペアを渡します。キーは「v-name」を通じて使用されるディレクティブ名を表し、その値はディレクティブの関連するフック関数を含むオブジェクトに対応します。フック機能については後ほど詳しく説明します。

注: 同じ要素がグローバル ディレクティブとローカル ディレクティブを使用して同じ属性を操作する場合、ローカル カスタム ディレクティブが最初に使用されます。ここでは近接性の原則が採用されており、統合属性操作の呼び出しではローカル ディレクティブがグローバル ディレクティブよりも優先されます。

3. フック機能とパラメータ設定

上記の紹介を読んだ後、ディレクティブの使用方法はわかりましたが、内部のフック関数を理解する必要があります。フック関数の呼び出し時間を理解することによってのみ、より完璧なディレクティブを定義できます。

ディレクティブ定義オブジェクトは、次のフック関数を提供できます (すべてオプション)。

* bind: ディレクティブが要素に最初にバインドされるときに 1 回だけ呼び出されます。ここで、1 回限りの初期化セットアップを実行できます。

* 挿入: バインドされた要素が親ノードに挿入されるときに呼び出されます (親ノードが存在することを保証するだけで、必ずしもドキュメントに挿入されているわけではありません)。

* update: コンポーネントの VNode が更新されたときに呼び出されますが、子 VNode が更新される前に発生することもあります。命令の値は変更されている場合と変更されていない場合があります。ただし、更新前と更新後の値を比較することで、不要なテンプレートの更新を無視することができます (詳細なフック関数のパラメータについては以下を参照してください)。

* componentUpdated: 命令が配置されているコンポーネントの VNode とその子 VNode がすべて更新された後に呼び出されます。

* unbind: 命令が要素からアンバインドされたときに 1 回だけ呼び出されます。

フック関数のパラメータ 次のパラメータがコマンド フック関数に渡されます。

* el: 命令がバインドされる要素。これを使用して DOM を直接操作できます。

* バインディング: 次のプロパティを含むオブジェクト:

* name: v- プレフィックスを除いたコマンド名。

* 値: ディレクティブのバインディング値。たとえば、v-my-directive="1+1" の場合、バインディング値は 2 です。

* oldValue: ディレクティブにバインドされた以前の値。update フックと componentUpdated フックでのみ使用できます。値が変更されたかどうかに関係なく使用できます。

* 式: 文字列形式のコマンド式。たとえば、v-my-directive="1+1" の場合、式は "1+1" になります。

* arg: コマンドに渡されるパラメータ（オプション）。たとえば、v-my-directive:foo の場合、パラメーターは "foo" です。

* modifiers: 修飾子を含むオブジェクト。たとえば、v-my-directive.foo.bar では、修飾子オブジェクトは {foo:true,bar:true} です。

* vnode: Vue コンパイルによって生成された仮想ノード。

* oldVnode: 以前の仮想ノード。update フックと componentUpdated フックでのみ使用できます。

4. 柔軟な使い方

（１）動的命令パラメータ

ディレクティブのパラメータは動的に変更できます。たとえば、v-mydirective:[argument]="value" では、コンポーネントインスタンスデータに応じて引数パラメータを更新できます。これにより、カスタム ディレクティブをアプリケーションで柔軟に使用できるようになります。次の例では、要素の境界バインディングと要素の背景プロパティ バインディングを実装するためのディレクティブが設定されています。

<div id="アプリ">
    <h1 v-border="redBorder">私は動的命令パラメータの要素 1 です</h1>　
     <h1 v-color:[pro]="redBg">私は動的命令パラメータの要素2です</h1>
  </div>
  <スクリプト>
    Vue.directive("border", {
      バインド: 関数 (el, バインディング, vnode) {
        console.log("el", el);
        console.log("バインディング", バインディング);
        console.log("vnode", vnode);
        el.style.border = バインディング値
      }
    })
    Vue.directive("色", {
      バインド: 関数 (el, バインディング, vnode) {
        console.log("el", el);
        console.log("バインディング", バインディング);
        console.log("vnode", vnode);
        el.style[binding.arg] = バインディング値
      }
    })
    新しいVue({
      el: "#app",
      データ（） {
        戻る {
          redBorder: "1px の赤実線",
          プロ: "backgroundColor",
          redBg: 「緑」
        }
      },
      メソッド: {
      }
    })
  </スクリプト>

結果は次のとおりです。

ちなみに、印刷されたパラメータを見てみましょう:

上記のコードでは、動的パラメータのカスタム命令の 2 つのメソッドが紹介されています。これは非常に柔軟に使用でき、実際のニーズに応じて適切なメソッドを選択できます。

（２）機能略語

多くの場合、バインドと更新で同じ動作をトリガーし、他のフックについては気にしないことがあります。たとえば、次のように記述します。

    Vue.directive("境界線", 
      関数 (el, バインディング, vnode) {
        el.style.border = バインディング値
      }
    ）

（３）オブジェクトリテラル方式

カスタム ディレクティブの要素をバインドするときは、オブジェクトの形式でデータを渡し、関数のショートカットで使用します。

<div id="アプリ">
    <h1 v-color="{ color: 'red', text: 'hello!' }">私はオブジェクトリテラルです</h1>
  </div>
  <スクリプト>
    // オブジェクトリテラル Vue.directive('color', function (el, binding) {
      console.log(binding.value.color) // => "赤"
      console.log(binding.value.text) // => "hello!"
      el.style.color = バインディング値の色
      el.innerHTML = バインディング値テキスト
    })
    新しいVue({
      el: "#app",
      データ（） {
        戻る {
        }
      },
      メソッド: {
      }
    })
  </スクリプト>

結果は次のとおりです。

5. 使用シナリオ

上記の使用シナリオに加えて、たとえば、プロジェクトでカスタム命令を使用して、フロントエンド ページの権限の問題を制御します。命令にはパラメーターが設定されます。ページが読み込まれるか、送信イベントがトリガーされると、カスタム命令のイベントが最初に実行され、この権限があるかどうかを要求して検証し、対応する操作を実行します。これを使用できる場所は多く、プロジェクトで継続的に実践する必要があります。使用されていない他の代替方法がある可能性があるため、これらの基本知識を継続的に学習して統合し、プロジェクトを完了するための最適なソリューションを適用する必要があります。

最後に

これで、Vue のカスタム ディレクティブの基本的な使い方に関する記事は終了です。Vue のカスタム ディレクティブの使い方の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。