Vue.js
カスタムディレクティブ
サーチ…
構文
-
Vue.directive(id, definition);
-
Vue.directive(id, update); //when you need only the update function.
パラメーター
パラメータ | 詳細 |
---|---|
id | String - v- 接頭辞なしで使用される指示IDです。 (使用時にv- プレフィックスを追加する) |
definition | オブジェクト - 定義オブジェクトは、いくつかのフック関数(すべてオプション)を提供できます: bind 、 update 、 unbind |
基本
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"
})