vue中的指令

在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。

一般 需要对DOM元素进行底层操作时使用，尽量只用来操作DOM展示，不修改内部的值。当使用自定义指令直接修改value值时绑定v-model的值也不会同步更新;如必须修改可以在自定义指令中使用keydown事件，在vue组件 中使用change事件，回调中修改vue数据。

1.自定义指令基本内容

• 全局定义: Vue . directive("focus" ,{})
• 局部定义: directives: {focus :{}}
• 钩子函数:指令定义对象提供钩子函数
  • bind :只调用一 -次，指令第次绑定到元素时调用。 在这里可以进行一次性的初始化设 置。
  • inserted :被绑定元素 插入父节点时调用(仅保证父节 点存在，但不一定已被插入文档中) 。
  • update :所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前调用。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
  • componentUpdate :指令所在组件的VNode及其子VNode全部更新后调用。
  • unbind:只调用一次，指令与元素解绑时调用。
• 钩子函数参数
  • el: 绑定元素
  • bing: 指令核心对象，描述指令全部信息属性
    • name
    • value
    • oldValue
    • expression
    • arg
    • modifers
  • vnode: 虚拟节点
  • oldVnode: 上一个虚拟节点(更 新钩子函数中才有用)

2.使用场景

• 普通DOM元素进行底层操作的时候，可以使用自定义指令
• 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。

3.使用案例

初级应用:

• 鼠标聚焦
• 下拉菜单
• 相对时间转换
• 滚动动画

高级应用:

• 自定义指令实现图片懒 加载
• 自定义指令集成第三方插件