一般的なカスタムディレクティブ
ユーザ登録ページを例にとると、デフォルトでは、ユーザがページを開いたとき、フォーカスはページ冒頭の入力ボックスに置かれず、ユーザが入力する前に入力ボックスをクリックする必要があります。
カスタムプロパティを使用すると、ページを開くとすぐに入力ボックスにフォーカスが自動的に移動します。これを行うには、VueのAPIである Vue.directive()を使用します 。括弧内の最初のパラメータはカスタムプロパティの名前で、2番目のパラメータはこのカスタムディレクティブを実装するビジネスロジックです。
以下はmain.jsに書かれたロジックです：
以下はApp.vueコンポーネントで記述したHTMLです。
その効果は以下の通り：
1つのページに複数の入力ボックスがある場合、このコマンドは1つの入力ボックスしか検索できません。各入力ボックスに対してこのコマンドを呼び出すと、デフォルトで最後の入力ボックスが検索されます。
挿入関数は、より一般的に使用されるフック関数の1つです。
パラメータ付きカスタムコマンド
定義規則
パラメータを持つカスタム命令の定義ルールは、命令を実装する関数に追加のパラメータがあることを除けば、一般的なカスタム命令とほぼ同じです。
例
inserted(el, binding){
el.style.backgrondColor=binding.value.color；
}
})
ここではinsertをbindに置き換えることができ、場合によってはこの2つの方法は共通です。
利用規定
拡大変形
Vue.directive()のフック関数をupdate()に置き換え、いくつかのJSロジックと組み合わせることで、以下のようなレスポンシブなデバイスが得られます。
変更ボタンをタップするたびに、入力ボックスの色が切り替わります。
カスタム指示 ローカル指示
このように記述されたカスタムディレクティブの役割は、グローバル、つまりプロジェクト内の親コンポーネントと子コンポーネントの両方に影響を与えるものであり、ローカルカスタムディレクティブは、単一のコンポーネントにのみ作用するカスタムディレクティブであり、ディレクティブを実装するディレクティブのロジックは、オブジェクトとしてコンポーネント内に記述することができます。ディレクティブを実装するディレクティブのロジックは、メソッドオブジェクトや計算オブジェクトなどと同じように、コンポーネントのオブジェクトとして書くことができます。同様に、メソッドオブジェクトや計算オブジェクトなどもグローバルロジックとして main.js に書くことができます。
以下のロジックはApp.vueコンポーネントに書かれています：
結果は以下の通り。
別のサブコンポーネントを書いてみてください：
ディレクティブオブジェクトは、いくつかの異なるカスタムディレクティブで記述することができます。
