vue 自定义指令

使用 Vue.directive()定义全局的指令

• 参数一：指令的名称。在定义的时候，指令名称前面不需要加 v- 前缀，调用时候必须添加
• 参数二：是一个对象，在这个对象身上有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作

---

代码语法

  //全局自定义指令
  Vue.directive('指令名',{
      bind:function(){},  
      inserted:function(){},
      updated:function(){}，
      componentUpdated:function(){},
      unbind:(){}
    })
   //私有自定义指令
    var vm = new Vue({
		el:'#app',
		directives:{
			'指令名':function(){

			}
		}
	})

---

钩子函数

• bind: 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次（在每个函数中，第一个参数永远是 el ，表示被绑定了指令的那个元素，这个 el 参数，是一个原生的 JS 对象）
• inserted: 表示元素插入到 DOM 中的时候，会执行 inserted 函数，触发一次
• updated: 当VNode更新的时候，会执行 updated，可能会触发多次
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
• unbind：只调用一次，指令与元素解绑时调用。

---

注意

• 样式只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内敛的样式，将来元素肯定会显示到页面中，这时候浏览器的渲染引擎必然会解析样式，应用给这个元素。所以，和样式相关的操作一般都可以在 bind 中执行
• 和 JS 行为有关的操作，最好在 inserted 中执行，防止 JS 行为不生效

---

钩子函数的参数

• el：指令绑定的元素，可以直接用来操作 DOM

• binding：一个对象，有以下属性

  • name：指令名，不包含 b- 前缀
  • value：指令的绑定值
  • expression：字符串形式的指令表达式
  • arg：船给指令的参数

• vnode：虚拟节点

• oldVnode：上一个虚拟节点