vue 自定义指令

为什么要自定义指令

//创建方式1：全局
vue.directive('directName',{})

//创建方式2：组件内
directives: {
  directName: {
    // 钩子
  }
}

//使用方式1：在模板中使用
<div v-directName></div>

//使用方式2：jsx语法中
export default{
	name:'app',
	render(){
		return (
			<div id="app">
				<div v-directName></div>
			</div>
		)
	}
}

注意：指令使用时要加前缀 v-

什么时候用自定义指令

• 当methods中或者组件生命周期中存在操作DOM / BOM逻辑的时，就应该思考是否可以抽象成一个自定义指令

如何创建自定义指令

自定义指令遵循设置原则中的开闭原则，通过钩子函数让开发者在不同的阶段处理不同的逻辑

钩子函数介绍：

Vue.directive('name',{
  //只调用一次，在指令绑定到元素的时候执行
  //在这里可以进行一次性的初始化操作
  //el.parentNode = null
  bind: function(el, binding, vnode) {},
  //被绑定元素插入父节点时调用
  // (仅保证父节点存在，但不一定已被插入文档中)。
  //el.parentNode = node
  inserted: function(el, binding, vnode) {},
  //所在组件的VNode 更新时调用，
  //但是可能发生在其子VNode 更新之前。
  //指令的值可能发生了改变，也可能没有，
  //但是可以通过比较更新前后的值来忽略不必要的模板更新
  update: function(el, binding, vnode, oldVnode) {},
  //指令所在组件的VNode 及其子VNode 全部更新后调用。
  componentUpdate: function(el, binding , vnode, oldVnode){},
  //只调用一次，在指令与元素解除绑定时调用
  unbind(el, binding, vnode){}
})

钩子参数介绍：

注意：这些参数除了el都应该是只读的，不建议修改，如果要在钩子间传递数据建议通过元素的datset

{
  //指令所绑定的元素，可以用来直接操作DOM
  el,
  // binding是一个对象， 包含以下属性
  {
    //指令名，不包括v-前缀。
    name ,
    //指令的绑定值， 例如: v-my-directive="1 + 1”中
    //绑定值为2。
    value ,
    //指令绑定的前一个值，
    //仅在update 和componentUpdated 钩子中可用。
    oldValue,
    //宇符串形式的指令表达式。
    //例如v-my-directive="1 + 1" 中，表达式为"I + 1"。
    expression ,
    //传给指令的参数，可选。
    //例如v-my-directive:foo 中，参数为“foo"。
    arg,
    //一个包含修饰符的对象。
    //例如: v-my-directive.foo.bar 中，
    //修饰符对象为{ foo: true, bar: true }。
    modifiers
  },
  //Vue编译生成的新虚拟节点
  vnode ,
  //上一个虚拟节点，仅在update 和componentUpdated 钩子中可用。
  oldVnode
}