Vue3 app.directive() 関数の詳細

Vue3 全局 APIVue3 グローバル API

app.directive()非常に強力な関数であり、開発者がグローバルディレクティブをカスタマイズできるようにします。

ディレクティブは Vue が提供する特別な機能で、DOM 要素を直接操作するために使用され、app.directive()独自のディレクティブを定義し、アプリ全体で使用することができます。

1. ディレクティブとは？

ディレクティブは Vue の特別な属性の一種であり、v-で始まります。Vue にはいくつかのよく使われるディレクティブが組み込まれており、例えばv-if、v-for、v-bindなど。これらのディレクティブは、DOM 要素をより便利に操作するのに役立ちます。

例えば、v-ifディレクティブは式の値に基づいて、特定の要素をレンダリングするかどうかを決定できます：

例

<div v-if="isVisible">表示内容</div>

当 isVisibleためにtrueの場合、div要素がレンダリングされます。そうでなければ、div要素はレンダリングされません。

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

組み込みのディレクティブに加えて、Vue では独自のディレクティブを定義することもできます。カスタムディレクティブは、自動フォーカスやスクロール監視など、特定の DOM 操作を処理するために使用できます。

Vue3 では、私たちはapp.directive()関数を使用してグローバルディレクティブを登録できます。

3. app.directive() の基本的な使い方

app.directive()関数は2つの引数を受け取ります：

  • ディレクティブ名：ディレクティブの名前を定義し、v-プレフィックスを含めないように注意してください。
  • ディレクティブオブジェクト：ディレクティブのフック関数を含むオブジェクトで、ディレクティブの動作を定義するために使用されます。

3.1 簡単なディレクティブを登録する

要素が DOM に挿入されるときに自動的にフォーカスされるディレクティブを定義する必要があるとします。次のように実装できます。

例

import { createApp } from 'vue';

const app = createApp({});

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

app.mount('#app');

この例では、focusディレクティブを定義しました。要素が DOM に挿入されるとき、mountedフック関数が呼び出され、el.focus()その要素が自動的にフォーカスを取得します。

3.2 カスタムディレクティブを使用する

テンプレートでカスタムディレクティブを使用する場合は、v-プレフィックスを追加する必要があります：

例

<input v-focus />

ページが読み込まれると、input要素は自動的にフォーカスを取得します。

4. ディレクティブのフック関数

カスタムディレクティブは複数のフック関数を含めることができ、異なるライフサイクル段階で特定の操作を実行するために使用されます。一般的なフック関数には次のものがあります：

  • mounted：ディレクティブが配置されている要素が DOM に挿入されたときに呼び出されます。
  • updated：ディレクティブが配置されているコンポーネントが更新されるときに呼び出されます。
  • unmounted：ディレクティブが配置されている要素が DOM から削除されるときに呼び出されます。

4.1 例：スクロールイベントを監視する

ユーザーがページをスクロールするときに何らかの操作を実行する必要があるとします。scrollディレクティブを定義できます：

例

app.directive('scroll', {
  mounted(el, binding) {
    const handler = binding.value;
    el.addEventListener('scroll', handler);
  },
  unmounted(el, binding) {
    const handler = binding.value;
    el.removeEventListener('scroll', handler);
  }
});

この例では、mountedフック関数はスクロールイベントリスナーを追加するために使用され、unmountedフック関数はリスナーを削除するために使用されます。

4.2 スクロールディレクティブを使用する

例

<div v-scroll="onScroll" style="height: 200px; overflow-y: scroll;">
`<p>滚动内容...</p>`
</div>

コンポーネント内でonScrollメソッドを定義します：

例

methods: {
  onScroll(event) {
    console.log(`'ユーザーがスクロール中'`, event);
  }
}

ユーザーがdiv要素をスクロールすると、onScrollメソッドが呼び出されます。

5. ディレクティブの引数と修飾子

カスタムディレクティブは引数と修飾子を受け取ることができます。引数はディレクティブ名の後のコロン部分で、修飾子はディレクティブ名の後のドット部分です。

5.1 例：引数と修飾子を使用する

あるディレクティブを定義する必要があるとします。color引数に基づいて要素の背景色を設定します：

例

app.directive('color', {
  mounted(el, binding) {
    const color = binding.arg || 'red';
    const modifiers = binding.modifiers;
    if (modifiers.bold) {
      el.style.fontWeight = 'bold';
    }
    el.style.backgroundColor = color;
  }
});

テンプレートでは次のように使用します：

例

<div v-color:blue.bold>背景色は青、フォントは太字</div>

この例では、blueはディレクティブの引数であり、boldは修飾子です。

Vue3 全局 APIVue3 グローバル API

その他の拡張