Vue 自定义指令

自定义指令
     

• 钩子函数
  

   

• 钩子函数参数
  

  

  <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(', ')
    }
  })
  new Vue({
    el: '#hook-arguments-example',
    data: {
      message: 'hello!'
    }
  })

   

• 函数简写
  

   

• 对象字面量
  记住，指令函数能够接受所有合法类型的 Javascript 表达式。