Vue.js
カスタムディレクティブ

構文

• Vue.directive(id, definition);
• Vue.directive(id, update); //when you need only the update function.

パラメーター

基本

Vue.jsには、コアで出荷されるデフォルトのディレクティブセットに加えて、カスタムディレクティブを登録することもできます。カスタムディレクティブは、データ変更を任意のDOM動作にマッピングするためのメカニズムを提供します。

Vue.directive(id, definition)メソッドでグローバル・カスタム・ディレクティブを登録し、ディレクティブIDとそれに続く定義オブジェクトを渡すことができます。コンポーネントのdirectivesオプションに含めることで、ローカルカスタムディレクティブを登録することもできます。

フック関数

• bind ：ディレクティブが最初に要素にバインドされたときに、一度だけ呼び出されます。
• update ：最初の値でbindした直後に初めて呼び出され、バインド値が変更されるたびに再度呼び出されます。新しい値と前の値が引数として提供されます。
• unbind ：ディレクティブが要素からアンバインドされているときに一度だけ呼び出されます。

Vue.directive('my-directive', {
     bind: function () {
       // do preparation work
       // e.g. add event listeners or expensive stuff
       // that needs to be run only once
     },
     update: function (newValue, oldValue) {
       // do something based on the updated value
       // this will also be called for the initial value
     },
     unbind: function () {
       // do clean up work
       // e.g. remove event listeners added in bind()
     }    
})

一度登録すれば、このようなVue.jsテンプレートで使うことができます（ v-接頭辞を追加することを忘れないでください）：

<div v-my-directive="someValue"></div>

update機能のみが必要な場合は、定義オブジェクトの代わりに単一の関数を渡すことができます。

Vue.directive('my-directive', function (value) {
  // this function will be used as update()
})

ディレクティブインスタンスのプロパティ

すべてのフック関数は実際のディレクティブオブジェクトにコピーされ、これらの関数の内部でthisコンテキストとしてアクセスすることができます。ディレクティブオブジェクトは、いくつかの有益なプロパティを公開します。

• el ：ディレクティブがバインドされている要素。
• vm ：このディレクティブを所有するコンテキストViewModel。
• expression ：引数とフィルタを除いたバインディングの式。
• arg ：存在する場合は引数。
• name ：接頭辞のないディレクティブの名前。
• 修飾子 ：修飾子がある場合はそれを含むオブジェクト。
• descriptor ：ディレクティブ全体の解析結果を含むオブジェクト。
• params ：param属性を含むオブジェクト。以下に説明する。

これらのプロパティはすべて読み取り専用として扱い、変更しないでください。ディレクティブオブジェクトにカスタムプロパティをアタッチすることもできますが、既存の内部プロパティを誤って上書きしないように注意してください。

これらのプロパティの一部を使用するカスタムディレクティブの例：

HTML

<div id="demo" v-demo:hello.a.b="msg"></div>

JavaScript

Vue.directive('demo', {
  bind: function () {
    console.log('demo bound!')
  },
  update: function (value) {
    this.el.innerHTML =
      'name - '       + this.name + '<br>' +
      'expression - ' + this.expression + '<br>' +
      'argument - '   + this.arg + '<br>' +
      'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
      'value - '      + value
  }
})
var demo = new Vue({
  el: '#demo',
  data: {
    msg: 'hello!'
  }
})

結果

name - demo
expression - msg
argument - hello
modifiers - {"b":true,"a":true}
value - hello!

オブジェクトリテラル

ディレクティブに複数の値が必要な場合は、JavaScriptオブジェクトリテラルを渡すこともできます。ディレクティブは有効なJavaScript式を使用できます。

HTML

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

JavaScript

Vue.directive('demo', function (value) {
  console.log(value.color) // "white"
  console.log(value.text) // "hello!"
})

リテラルモディファイア

ディレクティブがリテラル修飾子で使用されるとき、その属性値はプレーンな文字列として解釈され、 updateメソッドに直接渡されます。プレーンストリングは反応することができないため、 updateメソッドも1回だけ呼び出されます。

HTML

<div v-demo.literal="foo bar baz">

JavaScript

Vue.directive('demo', function (value) {
  console.log(value) // "foo bar baz"
})