解説

• v-()を自分で作成することが可能
• コードを抽象化する時に使用する

グローバルなカスタムディレクティブ

• ライフサイクルhook的なものがある

main.js

Vue.directive('border', {
	bind(el, binding, vnode) {
  //  ディレクディブが初めて対象の要素に紐づいた時。最初の一回だけ呼ばれる　※比較的よく使われる。省略記法も存在する
  },
  inserted(el, binding, vnode) {
  //  親Nodeに挿入された時。親コンポーネントにマウントされた時をイメージする
  },
  update(el, binding, vnode, oldVnode) {
  //  コンポーネントが更新される度。子コンポーネントが更新される前　※比較的よく使われる。省略記法も存在する
  },
  componentUpdated(el, binding, vnode, oldVnode) {
  //  コンポーネントが更新される度。子コンポーネントが更新された後
  },
  unbind(el, binding, vnode) {
  //  ディレクティブがひもづいている要素から取り除かれた時
  },
})

• bindとupdateはよく使われるので、まとめた省略記法が存在する

省略前

Vue.directive('border', {
  bind(el, binding, vnode) {
  //  ディレクディブが初めて対象の要素に紐づいた時。最初の一回だけ呼ばれる
  },
  update(el, binding, vnode, oldVnode) {
  //  コンポーネントが更新される度。子コンポーネントが更新される前
  },
})

省略後

Vue.directive('border', function (el, binding) {
  
})

elを使った記法

Vue.directive('border', function (el) {
  el.style.border = 'solid black 2px';
})

bindingを使った記法