【vue自定义指令directive】

指令使用方式

//会实例化一个指令，没有参数 
`v-directiveName`
 
// value传值(字符串、方法等等）如`v-html="'
内容
'"`
`v-directiveName="value"`  
 
// 传参数（`arg`），如`v-bind:class="className"`
`v-directiveName:arg="value"` 
 
//使用修饰符（`modifier`）
`v-directiveName:arg.modifier="value"` 

指令定义方式

全局注册指令

可以和main.js同级新建directive.js
main.js引入 import ‘./utils/directive.js’;

directive.js

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()  // 页面加载完成之后自动让输入框获取到焦点的小功能
  }
});

局部注册指令

vue文件中使用，与data同级

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus() // 页面加载完成之后自动让输入框获取到焦点的小功能
    }
  }
}

指令钩子函数

5个钩子函数

• bind：指令第一次绑定到元素时调用，只执行一次。在这里可以进行一次性的初始化设置。
• inserted：被绑定的元素，插入到父节点的 DOM 中时调用（仅保证父节点存在）。
• update：组件更新时调用。
• componentUpdated：组件与子组件更新时调用。
• unbind：指令与元素解绑时调用，只执行一次。

钩子函数中的3参数

每个钩子函数都含有 el、binding、vnode 这三个参数

• el：指令所绑定的元素，可以用来直接操作 DOM
• binding：一个对象，包含以下 property

1. name：指令名，不包括 v- 前缀。
2. value：指令的绑定值，例如：v-directiveName=“1 + 1” 中，绑定值为 2。
3. oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
4. expression：字符串形式的指令表达式。例如 v-directiveName=“1 + 1” 中，表达式为 “1 + 1”。
5. arg：传给指令的参数，可选。例如 v-directiveName:foo 中，参数为 “foo”。
6. modifiers：一个包含修饰符的对象。例如：v-directiveName.foo.bar 中，修饰符对象为 { foo: true, bar: true }
7. vnode：Vue 编译生成的虚拟节点
8. oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用