Vue3 directives プロパティ
Vue3 オプション APIVue.js では、directivesはローカルディレクティブを登録するためのプロパティです。これにより、directives開発者は現在のコンポーネント内でカスタムディレクティブを定義して使用でき、特定の DOM 操作や動作を実現できます。本稿では詳しく解説します。directivesプロパティの役割、使用方法、および実際の応用シーンについて。
directives（ディレクティブ）は、Vue.js における特別な機能であり、DOM 要素を直接操作するために使用されます。Vue には多くの組み込みディレクティブ（例：v-if、v-for、v-bindなど）、同時に開発者はdirectivesプロパティでカスタムディレクティブを定義できます。カスタムディレクティブは、コンポーネント内でローカル登録でき、そのコンポーネント内でのみ有効になります。
directives プロパティの基本用法
Vue3 では、directivesプロパティはオブジェクトであり、キーはディレクティブ名、値はディレクティブフック関数を含むオブジェクトです。一般的なフック関数は次のとおりです：
mounted：バインドされた要素が DOM に挿入されたときに呼び出されます。updated：バインドされた要素の親コンポーネントが更新されたときに呼び出されます。unmounted：バインドされた要素が DOM から削除されたときに呼び出されます。
以下は、カスタムディレクティブを定義して使用する方法を示す簡単な例です：
例
<template>
<div v-custom-directive>これはカスタムディレクティブの例です</div>
</template>
<script>
export default {
directives: {
// カスタムディレクティブを定義
customDirective: {
mounted(el) {
// 要素が DOM に挿入されるとき、背景色を黄色に設定
el.style.backgroundColor = 'yellow';
},
updated(el) {
// コンポーネントが更新されるとき、テキストの色を赤に設定
el.style.color = 'red';
}
}
}
};
</script>
<div v-custom-directive>これはカスタムディレクティブの例です</div>
</template>
<script>
export default {
directives: {
// カスタムディレクティブを定義
customDirective: {
mounted(el) {
// 要素が DOM に挿入されるとき、背景色を黄色に設定
el.style.backgroundColor = 'yellow';
},
updated(el) {
// コンポーネントが更新されるとき、テキストの色を赤に設定
el.style.color = 'red';
}
}
}
};
</script>
コード解析
directivesプロパティ：script内で、directivesプロパティを使用して「customDirective」というディレクティブを定義しています。- フック関数：
mountedフック関数は要素が DOM に挿入されたときに実行され、背景色を黄色に設定します；updatedフック関数はコンポーネントが更新されたときに実行され、テキストの色を赤に設定します。 - ディレクティブの使用：
template内でv-custom-directiveそのディレクティブを使用します。
カスタムディレクティブの応用シーン
カスタムディレクティブは次のようなシーンで非常に役立ちます：
- DOM 操作：例えば、入力欄にフォーカスする、要素のスタイルを変更するなどです。
- サードパーティライブラリの統合：サードパーティライブラリ（例：
highlight.js、Chart.js）を Vue コンポーネントと組み合わせて使用します。 - イベントリスニング：要素に特定のイベントリスナーを追加し、複雑な動作を実現します。
その他の拡張