カスタムディレクティブ
Vueライブラリによってあらかじめ定義されたディレクティブ（v-bindなど）の他に、自分で定義して設定することができます。
これを使用することによって、独自の属性を定義し、値を与えることができます。
Vue.directive('change-color', {
bind(el, binding) {
el.addEventListener('click', () => {
el.style.color = binding.value;
});
},
});
new Vue({
el: '#example',
});
<div id="example">
<p v-change-color="'red'">クリックすると赤に</p>
</div>
フック関数
カスタムディレクティブには、フック関数を設定します。
カスタムディレクティブに紐づく処理をどのタイミングで行うかを指定します。
bind: ディレクティブが初めて対象の要素にひも付いた時に 1 度だけ呼ばれます。ここで 1 回だけ実行するセットアップ処理を行えます。
inserted: ひも付いている要素が親 Node に挿入された時に呼ばれます(これは、親 Node が存在している時にだけ保証します。必ずしも、ドキュメントにあるとは限りません)。
update: ひも付いた要素を抱合しているコンポーネントの VNode が更新される度に呼ばれます。しかし、おそらく子コンポーネントが更新される前でしょう。 ディレクティブの値が変化してもしなくても、バインディングされている値と以前の値との比較によって不要な更新を回避することができます。(フック引数に関しては下記を参照してください)
参考: https://jp.vuejs.org/v2/guide/custom-directive.html#%E3%83%95%E3%83%83%E3%82%AF%E9%96%A2%E6%95%B0
フック関数の仮引数
フック関数は、仮引数として elとbinding を受け付けます。
- el: エレメント、ディレクテイブに紐づいたDOM要素
- binding: ディレクティブの名前や、属性値として渡される値などデータ。
独自の属性を定義し、値を与えることができる機能です。