Vue3 カスタムディレクティブ

デフォルトで設定されているコアディレクティブ（v-model と v-show）に加えて、Vue ではカスタムディレクティブを登録することもできます。

次に、グローバルディレクティブ v-focus を登録します。このディレクティブは、ページ読み込み時に要素がフォーカスを取得する機能を持ちます：

インスタンスで directives オプションを使用してローカルディレクティブを登録することもできます。これにより、ディレクティブはこのインスタンス内でのみ使用できます：

フック

フック関数

ディレクティブ定義関数には、いくつかのフック関数（オプション）が用意されています：

• created : バインドされた要素の属性またはイベントリスナーが適用される前に呼び出されます。

• beforeMount : ディレクティブが最初に要素にバインドされ、親コンポーネントがマウントされる前に呼び出されます。

• mounted : バインドされた要素の親コンポーネントがマウントされた後に呼び出されます。

• beforeUpdate: コンポーネントを含む VNode が更新される前に呼び出されます。

• updated: コンポーネントを含む VNode とその子コンポーネントの VNode が更新された後に呼び出されます。

• beforeUnmount: バインドされた要素の親コンポーネントがアンマウントされる前に、一度だけ呼び出されます。

• unmounted: ディレクティブが要素からバインド解除され、親コンポーネントがアンマウントされたときに、一度だけ呼び出されます。

フック関数のパラメータ

フック関数のパラメータは次のとおりです：

el

elディレクティブがバインドされた要素。DOM を直接操作するために使用できます。

binding

binding はオブジェクトで、次の属性を含みます：

• instance：ディレクティブを使用するコンポーネントのインスタンス。
• value：ディレクティブに渡される値。たとえば、v-my-directive="1 + 1"中では、その値は2。
• oldValue：以前の値。使用できるのはbeforeUpdateとupdated中だけです。値が変更されているかどうかに関わらず使用できます。
• arg：ディレクティブに渡されるパラメータ（もしあれば）。たとえばv-my-directive:foo中で、arg は"foo"。
• modifiers：修飾子（もしあれば）を含むオブジェクト。たとえばv-my-directive.foo.bar中で、修飾子オブジェクトは{foo: true，bar: true}。
• dir：ディレクティブの登録時にパラメータとして渡されるオブジェクト。たとえば、次のディレクティブでは：

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

dir は次のオブジェクトになります：

{
  mounted(el) {
    el.focus()
  }
}

vnode

el パラメータとして受け取った実際の DOM 要素のブループリント。

prevNode

前の仮想ノード。beforeUpdate と updated フックでのみ利用可能です。

次の例では、これらのパラメータの使用法を示しています：

場合によっては、他のフック関数が不要なこともあります。次の形式で関数を簡略化できます：

Vue.directive('サンプル', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

ディレクティブ関数は、有効な JavaScript 式をすべて受け入れることができます。次の例では、JavaScript オブジェクトを渡しています：