Vue 自定义指令的创建和使用

自定义指令是什么？

在vue中指令分为内置指令和自定义指令

• 内置指令：v-html、v-if、v-bind、v-on… 这都是Vue内置的一些指令，可以直接使用

• 自定义指令：自己定义的指令，可以封装一些DOM操作，扩展额外的功能。这些指令被称为自定义指令

  每个指令都有自己各自独立的功能

  自定义指令语法

  自定义指令分为全局自定义指令和局部自定义指令

• 全局自定义指令注册

全局自定义指令需要通过Vue.directive来注册

//在main.js中
// focus为自定义指令名
Vue.directive('focus', {
  // 当被绑定的元素插入DOM中时...
  inserted (el) {
    // 可以对 el 标签，扩展额外功能
    el.focus() //聚焦元素
  }
})

• 局部自定义指令注册

局部自定义指令需要通过设置directives属性来注册

directives: {
	//自定义指令名
	focus: {
	// 当被绑定的元素插入DOM中时...
	inserted (el） {
		el.focus()
		}	
	}
}

在页面使用时，需要在自定义指令前面加上v-,如 v-focus

<input v-focus type="text">

• 使用指令

  注意：在使用指令的时候，一定要先注册，再使用，否则会报错
  使用指令语法： v-指令名。如：<input type="text" v-focus/>
  注册指令时不用加v-前缀，但使用时一定要加v-前缀

指令中的配置项

自定义指令的钩子函数

• bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
• update：所在组件的VNode更新时调用，**但可能发在子VNode 更新之前。 **指令值可能发生了改变，也可能没有。但是你可以通过比较更新后的值来忽略不必要的模版更新
• componentUpdated：指令所在组件的VNode 及其子 VNode全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

指令钩子函数的参数

• el : 指令所绑定的元素，可以用来直接操作DOM。
• binding：一个对象，包含一下property：
  • name：指令名，不包活 v- 前缀。
  • value：指令的绑定值，例如：v-getNum=’ 1+1’中，绑定的值为2.
  • oldValue：指令绑定的前一个值，仅在update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如v-getNum=’ 1+1’中，表达式为’ 1+1’.
  • arg:传给指令的参数，可选。；例如v-getNum:foo中，参数为’foo’。
  • modifiers：一个包含修饰符的对象。例如：v-getNum.foo.bar 中，修饰符对象为{ foo: true, bar: true}。
• vnode: Vue编译生成的虚拟节点。
• oldVnode: 上一个虚拟节点，仅在update和componentUpdated钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

binding示例

<div v-demo="{ msg: 'hello', name: '张三' }"></div>
<script>
    Vue.directive('demo', function (el, binding) {
    console.log(binding.value.msg) // "hello"
    console.log(binding.value.name)  // "张三!"
    })
</script>

防抖、图片懒加载、一键 Copy的功能、拖拽、页面水印、权限校验、输入框自动聚焦、相对时间转换、下拉菜单