13.Vue 自定义指令

1.什么是指令

在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统

我们看到的v-开头的行内属性，都是指令例如v-show，v-if，Vue允许注册自定义指令

指令的几种使用方式

//实例化一个指令，无参 
`v-xxx`

//将值传到指令中
`v-xxx="value"`

//将字符串传到指令中，如`v-html="'<p> </p>'"`
 `v-xxx="'string'"`

//传参数（`arg`），如`v-bind:class="className"`
`v-xxx:arg="value"` 


//使用修饰符（`modifier`）
`v-xxx:arg.modifier="value"`

2.编写指令并注册

全局指令

// main.js中注册一个全局指令 v-focus
Vue.directive('focus', {
  // 当被绑定的元素插入到DOM中时
  inserted: function (el) {
    // 聚焦
    el.focus()
  }
})

局部注册指令

<template>
  <div>
    <input type="text" v-focus>
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      // 定义指令
      inserted: function (el) {
        el.focus()
      }
    }
  }
}
</script>

3.指令的生命周期钩子函数

        bind：只调用一次，指令第一次绑定到元素上时调用。

        inserted：被绑定元素插入到父节点时

        update：所在组件VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生改变也可能没有。但是可以通过比较新旧值来忽略不必要的模板更新

        componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用

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

4.钩子函数参数

所有的钩子函数都有以下

        el：指令所绑定的元素，可以直接来操作DOM

        binding：一个对象，包括以下属性property：

                name：指令名，不包括v-前缀

                value：指令的绑定值，如v-my-directive="1 + 1"，绑定值为2

                oldValue：指令所绑定的前一个值，仅在update和componentUpdated中可用

                expression：字符串形式的指令表达式。如v-my-directive="1 + 1"，表达式为"1 + 1"

                arg：传给指令的参数，可选。如v-my-directive:foo，参数为foo

                modifiers：一个包含修饰符的对象。如v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }

        vnode：Vue编译生成的虚拟结点

        oldValue：上一个虚拟结点，仅在update和componentUpdated钩子中可用

注意：除了el之外，其他参数都是只读的。如果需要在钩子之间共享数据，可通过dataset进行

博主编写了一些常用的自定义指令，如图片懒加载等，在其它专栏中有相关文章。