vue自定义指令

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 }。
• 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>