《Vue.js实战笔记》第八章_vuejs前端开发实战第8章项目实战-优快云博客

本文深入探讨Vue框架中自定义指令的使用方法，包括全局与局部指令的定义，以及bind、inserted、update、componentUpdated和unbind等钩子函数的应用场景。通过实例演示如何利用这些钩子函数获取和操作绑定值、元素属性和虚拟节点。

practice_5.html

<!-- 

    第8章
    第一节 自定义指令
    类似于Vue的定义，分全局和局部，局部为directives 别漏了s
   
    指令定义函数提供了几个钩子函数（可选）：
    bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
    inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
    update：第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值，之后被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
    componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
    unbind：只调用一次， 指令与元素解绑时调用。

    钩子函数的参数：(el, binding, vnode, oldVnode)
    　　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.a.b，modifiers的值为{'a':true,'b':true}
    　　vnode：Vue编译的生成虚拟节点；
    　　oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。
 -->
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" media="screen" href="style_4.css" />
    <script src="Vue.js"></script>
</head>

<body>
    <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
    
</body>
<script>
    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!'
  }
})
</script>

</html>