013_重学Vue_自定义指令

Vue 通过组件的方式实现代码复用，指令也是一种代码复用的方式。譬如我们要根据权限控制按钮的隐藏和显示，就可以用指令来实现。

自定义指令分为全局和组件内两种方式注册：

一、局部注册指令

如果是简单的操作则可以使用函数式，设计到复杂的逻辑则需求对象式的方式定义。对象式提供了几个钩子函数，开发人员可以利用钩子做一些特殊处理，譬如进入页面后光标立即聚焦到输入框。

1. 函数式

directives: {
    big(element, binding) {
       element.style.fontSize = '40px'
    }
}

2. 对象式

directives: {
    big: {
       inserted: (element, binding) {
           element.style.fontSize = '40px';
       }
    }
}

指令的钩子：

1. bind：指令第一次绑定到元素时调用；
2. inserted：被绑定元素插入到父元素时调用；
3. update：所在组件Vnode更新时调用，可根据新旧值写逻辑；
4. componentsUpdated：指令所在组件及其VNode全部更新后调用；
5. unbind：指令解绑时调用；

二、全局注册指令

Vue.directive('permission', {
  inserted(el, binding) {
     //add、edit、del是通过接口获取的权限列表
     if(!["add", "edit", "del"].includes(binding.value)) {
        el.style.display = "none";
     }
  },
})

全局注册时一定要在 new Vue()前注册，不然会报错。下面是错误示例，报错信息： [Vue warn]: Failed to resolve directive: small。

<span v-small="1">{{address}}</span>

const vm = new Vue({
  el: '#app',
  data: {
    address: '中国',
  }
})

Vue.directive('small', {
  inserted(element, bind) {
    console.log('small', element, bind)
  },
})

3. 指令的值

指令的值可以是任意的 JavaScript 表达式。