カスタムディレクティブを使う

ドキュメント

作り方概要

以下２つのステップで実装する。
カスタムディレクティブを定義し、カスタムディレクティブを適用したい要素に設定する。

カスタムディレクティブを定義する

カスタムディレクティブを定義する方法はグローバルとローカルの２つの方法がある。グローバルでカスタムディレクトリを使いたい場合はmain.jsで定義する。ローカルでカスタムディレクティブを使いたい場合、すなわちそのコンポーネントのみでカスタムディレクティブを使いたい場合は、当該コンポーネントで定義する。

グローバルで定義する

//main.js 

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// カスタムディレクティブをグローバルで使うときはVue.directiveを使う
// 引数は２つ取る 名前とオブジェクトである
Vue.directive('border', {
  bind(el, binding, vnode){},
  update(el, binding, vnode){}
});

new Vue({
  render: h => h(App),
}).$mount('#app')

ローカルで定義する

// border という名前のカスタムディレクティブを登録

new Vue({
  el: 'app',
  directives: {
    border: {
      bind(el, binding, vnode){},
      update(el, binding, vnode){}
    }
  }
})

フック関数

カスタムディレクティブはVueのようなライフサイクルを持っていて、カスタムディレクティブの挙動を定める=フック関数の挙動を編集する、と置き換えられる。このフック関数はパラメータを取ることができる。それはel, binding, vnode, oldnodeである。 elはDOM操作をしたいときに使い要素だと考えれば良い。
bindingはカスタムディレクティブにセットされた属性値を取り出すときに使われる。

フック関数の種類

bind()...ディレクティブが初めて対象の要素に紐付いたとき
inserted()... 親Noneに挿入されたとき
update()... コンポーネントが更新されるたび。子コンポーネントが更新されるたび
componentUpdated()...コンポーネントが更新されるたび。子コンポーネントが更新された後
unbind()... ディレクティブが紐付いてる要素から取り除かれたとき

elを使ったサンプル例

// border という名前のカスタムディレクティブを登録

new Vue({
  el: 'app',
  directives: {
    border: {
      bind(el, binding, vnode){
          el.textContent = 'カスタムディレクティブが働いていればこの文章が見れる';
      },
      update(el, binding, vnode){}
    }
  }
})

bindingを使ったサンプル例

bindingはカスタムディレクティブにセットされた属性値を取り出すときに使われる。てことで、カスタムディレクティブを定義するだけでなく、カスタムディレクティブを使う場面で属性値を定める必要もある

// border という名前のカスタムディレクティブを登録

new Vue({
  el: 'app',
  directives: {
    border: {
      bind(el, binding, vnode){
          // bindingを使ってカスタムディレクティブの属性値を取り出す
          // value変数は'カスタムディレクティブが働いていればこの文章が見れる'が入っている
          const value = binding.value;
          el.textContent = value;
      },
      update(el, binding, vnode){}
    }
  }
})

// HelloWorld.vue
<template>
<p v-border="'カスタムディレクティブが働いていればこの文章が見れる'">Home</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

その他

基本的にbindとupdateを使い、bindとupdateは同じ動作を書くのが基本らしい。

カスタムディレクティブを使うどころ。 -> コードを抽象化したいときに使う！！

カスタムディレクティブを適用したい要素に設定

すべてのカスタムディレクティブはvから始まる。
カスタムディレクティブはv-hogehogeと名付けられる。定義する際はそのv-を除いて定義する。

以下はカスタムディレクティブの呼び出し(定義したものを使用)を指している。カスタムディレクティブを定義するのは、main.jsかコンポーネントである。

// HelloWorld.vue
<template>
<p v-border>Home</p> # コレ
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

diadia

興味があることをやってみる。自分のメモを残しておきます。