【Vue.js】オリジナルなディレクティブを作りたい

See the Pen
ydZdJQ by りっしー (@hiwriterprogram)
on CodePen.

参考

速習Vue.js 速習シリーズ 山田祥寛

フック関数

//以下の「bind」はフック関数と言う
  bind:(el,binding)=>{
    el.style.backgroundColor = binding.value;
  }

フック関数にはいくつかの種類があります。

1. bind:ディレクティブが要素に紐づいた時に一度だけ
2. inserted:要素が親ノードに挿入された時
3. update:上位のコンポーネントが更新される時
4. componentUpdated:配下のコンポーネントが更新された時
5. unbind:ディレクティブが要素から除去された時に一度だけ

引用：
速習Vue.js 速習シリーズ 山田祥寛

フック関数の引数

フック関数が受け取れる引数には4つの種類があります。

  bind:(el,binding,vnode,oldVnode)=>{
    el.style.backgroundColor = binding.value;
  }

1. el:ディレクティブが適用された要素
2. binding:バインド情報オブジェクト（具体的なプロパティは以下）
3. vnode:現在の仮想ノード
4. oldVnode:変更前の仮想ノード（update、componentUpdatedのフック関数のみで使用可能）

引用：
速習Vue.js 速習シリーズ 山田祥寛

いずれの引数も省略可能と言うことで、最初に挙げた例では、vnodeとoldVnodeは省略されています。

addEventLisrtener追加も可能！

See the Pen
ydZdJQ by りっしー (@hiwriterprogram)
on CodePen.