[TOC] # 自定义指令 除了一些内置的制定（v-model和v-show...）,Vue也允许注册自定义指令。 ***** >自定义指令写在Vue的directives里面,语法格式： directives:{ '定义的指令名':{ bind(el,binding){ 指令在一次绑定的时候要表现的效果代码 }， update（el,binding）{ 指令在更新的时候要表现的效果代码 } } } 在模板中使用自定义函数； <div v-自定义指令名> </div> ***** ### 钩子函数 * 1.`bind` : 在自定义指令首次绑定的时候调用，只会调用一次 * 2.`inserted` ： 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 * 3.`update`： 所在组件的 VNode 更新时调用，**但是可能发生在其子 VNode 更新之前**。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 * 4.` componentUpdated`：指令所在组件的 VNode **及其子 VNode** 全部更新后调用。 * 5.`unbind`：只调用一次，指令与元素解绑时调用。 #### 钩子函数的参数 >[info]* el：指令所绑定的元素，可以用来直接操作 DOM 。 * `binding`：一个对象，包含以下属性： * `name`：指令名，不包括 `v-` 前缀。 * `value`：指令的绑定值，例如：`v-my-directive="1 + 1"` 中，绑定值为 `2`。 * `oldValue`：指令绑定的前一个值，仅在 `update` 和 `componentUpdated` 钩子中可用。无论值是否改变都可用。 * `expression`：字符串形式的指令表达式。例如 `v-my-directive="1 + 1"` 中，表达式为 `"1 + 1"`。 * `modifiers`：一个包含修饰符的对象。例如：`v-my-directive.foo.bar` 中，修饰符对象为 `{ foo: true, bar: true }`。 * * `vnode`：Vue 编译生成的虚拟节点。 * `oldVnode`：上一个虚拟节点，仅在 `update` 和 `componentUpdated` 钩子中可用。 <br> #### 案例（类似于v-show指令效果） <br> ``` <div id="app"> <p v-demo = 'bool'>{{str}}</p> <button @click = 'clickA'>按钮</button> </div> <script> new Vue({ el:'#app', data:{ str:'我会显示的', bool:true, }, methods:{ // 按钮的点击事件 clickA(){ this.bool = !this.bool; } }, directives:{ 'demo':{ // 指令在第一次绑定的时候会触发 el是DOM节点，binding是在页面绑定的表达式的属性值 bind(el,binding){ console.log(el); console.log(binding); console.log(binding.value); console.log('这是binding的方法') if(binding.value){ el.style.display = 'block'; }else{ el.style.display = 'none'; } }, update(el,binding){ // 指令上绑定的变量发生改变出发的方法 console.log('这是update的方法'); console.log(binding.value); console.log(binding); // 判断节点之前的值是否跟现在的值不相等 if (binding.oldValue !== binding.value) { if (binding.value) { el.style.display = 'block'; } else { el.style.display = 'none'; } } } } }, }) </script> ``` ***** <br> **页面渲染结果** **bind**  ***** **update**