vue.directive

1、vue.directive的作用

vue.directive是我们除了内置的指令（如v-model和v-show）之外的自定义指令。自定义指令是对普通DOM元素进行的底层操作，它是一种有效的的补充和扩展，不仅可以用于定义任何的dom操作，并且是可以复用的，

 

2、vue.directive的使用场景

例如在图片加载完成前，用随机的背景色占位，图片加载完成后直接渲染出来，用自定义指令可以方便的实现该问题。还有高亮类的操作，可以将其封装为自定义指令。

 

3、使用vue.directive的3个demo

3.2、使用vue.directive的图片加载

 

4、vue.directive的官方概念

1、vue.directive 有两个参数：id（string）和[definition](function|object)

2、vue.directive有5种钩子函数，分别是：bind, inserted ,update, componentUpdated, unbind

2.1、bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置

2.2、inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定被插入文档中）

2.3、update:所在组件的vnode更新时调用，但是可能发生在其子vnode更新之前，指令的值可能发生了变化，也可能没有

2.4、componentUpdate：指令所在组件的vnode及其子vnode全部更新后调用

2.5、unbind：只调用一次，指令与元素解绑时调用

3、钩子函数参数

el，binding（name,value,oldValue,expression,arg,modifiers）， vnode，oldvnode 

4、动态指令参数

指令的参数可以是动态的，例如，v-myDirective:[argument]="value"中，argument参数可以根据组件实例数据进行更新 

 5、对象字面量

指令需要多个值，可以传入一个js对象字面量，指令函数接受所有合法的js表达式

 

5、vue.directive使用体验

5.1、增长了不同的知识点，

5.2、update组件更新前的状态。componentUpdated组件更新后的状态

5.3、bind时父节点为null，bind是在dom书绘制前调用

5.4、inserted时父节点存在，在dom树绘制后调用