Vue自定義指令：
Vue.directive('myDr', function (el, binding) {
el.onclick =function(){
binding.value();
}
})
<button v-myDr="ceshi">測試</button>
此時綁定事件的binding.value是一個表達式，此處為方法ceshi，
若要傳遞字符串，則需要寫“‘ceshi’”,這樣傳入的binding.value就是字符串’ceshi’了。
官方文檔詳解：
- el: 指令所綁定的元素，可以用來直接操作 DOM 。
- binding: 一個對象，包含以下屬性：
- name: 指令名，不包括
v-前綴。 - value: 指令的綁定值， 例如：
v-my-directive="1 + 1", value 的值是2。 - oldValue: 指令綁定的前一個值，僅在
update和componentUpdated鈎子中可用。無論值是否改變都可用。 - expression: 綁定值的字符串形式。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 傳給指令的參數。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一個包含修飾符的對象。 例如：
v-my-directive.foo.bar, 修飾符對象 modifiers 的值是{ foo: true, bar: true }。
- name: 指令名，不包括
- vnode: Vue 編譯生成的虛擬節點，查閱 VNode API 了解更多詳情。
- oldVnode: 上一個虛擬節點，僅在
update和componentUpdated鈎子中可用。
|
<div id="hook-arguments-example" v-demo:hello.a.b="message">
</div>
Vue.directive(
'demo', {
bind:
function (el, binding, vnode) {
var s =
JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) +
'<br>' +
'value: ' + s(binding.value) +
'<br>' +
'expression: ' + s(binding.expression) +
'<br>' +
'argument: ' + s(binding.arg) +
'<br>' +
'modifiers: ' + s(binding.modifiers) +
'<br>' +
'vnode keys: ' +
Object.keys(vnode).join(
', ')
}
})
|
|
<div id="hook-arguments-example" v-demo:hello.a.b="message">
</div>
|