Vue：自定义指令的简单用法以及自定义指令模块化

Vue中除了核心的默认指令集外，Vue是允许注册自己的自定义指令。请注意，在 Vue 2.0 中，代码重用和抽象的主要形式是组件 - 但是在某些情况下，您需要对普通元素进行低级别的 DOM 访问，这也是自定义指令仍然有用的地方

指令是有五个钩子函数的！

1. bind

指令第一次绑定到元素上；只调用一次；可以做相关初始化的操作；

2. inserted

被绑定的元素插入到其父元素节点时调用；

3. update

当所在组件的VNode更新时调用；但是update和VNode的更新顺序不定，所以需要比较；

4. componentUpdated

指令所在组件的VNode及其子VNode全部更新完成后调用；

5. unbind

解绑；只调用一次

先举一个简单的示例，我们去注册一个自定义的指令 v-font-red ，当给我们的元素加上这个指令时，字体呈现红色！

在main.js中写入

Vue.directive('font-red', {
    // 只调用一次，指令第一次绑定到元素时调用
    bind(el, binding, vnode) {
    },
    // 被绑定元素插入父节点时调用 其他钩子函数做演示用，可以打印打印都输出什么东西
    inserted(el) {
        console.log('inserted')
        el.style.color = '#ff0000'
    },
    // 所在组件的 VNode 更新时调用
    update(el, binding, vnode) {
        console.log('update')
    },
    // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
    componentUpdated(el, binding, vnode) {
        console.log('componentUpdated')
    },
    unbind(el, binding, vnode) {
        console.log('unbind')
    }
})

在组件页面中使用

<template>
  <div class="home">
    <h2 v-font-red>大标题</h2>
  </div>
</template>

页面呈现：

 示例2，现在我不想让字体只变红，想要它字体大小，颜色都可以自己设置，不再是固定值，那这就需要传值，

main.js 再注册一个自定义的指令 v-style

Vue.directive('style', {
    inserted: function (el, binding) {
        let {value} = binding
        el.style.color = value.color || '#000'
        el.style.fontSize = value.fontSize || '17px'
    }
})

页面组件中使用：

<template>
  <div class="home">
    <div v-style="{'fontSize':'50px','color':'blue'}">大标题</div>
    <div v-style="{'fontSize':'40px','color':'green'}">小标题</div>
  </div>
</template>

页面呈现：

 示例3：再比如，我有一些按钮，有的人可以看见，有的人看不到，就是后台管理经常说的权限问题

main.js  当传递的值为read的时候，我展示该按钮，不是则不展示

Vue.directive('permissions', {
    inserted: function (el, binding, vnode, oldVnode) {
        let {value} = binding;
        if (value !== 'read') {
            el && el.remove()
        }
    }
})

页面组件使用

<template>
  <div class="home">
    <el-button v-permissions="'read'" type="primary">详情</el-button>
    <el-button type="primary" v-permissions="'readOnly'">详情Only</el-button>
  </div>
</template>

页面呈现： 只能看到一个按钮，再查看元素，看看dom

 不符合要求的那个button按钮 dom上都不存在了

除此之外：我们还可以传递数组，但是自定义指令里面的业务逻辑就需要跟着进行修改，取决于自己的业务，进行对应的修改

 <el-button v-permissions="['read','aaa','bbb']" type="primary">详情</el-button>

最后，当我们项目用到的自定义指令比较多的时候，尤其是，在自定义指令中进行了比较复杂的业务逻辑，这个时候全部写在main.js里面会不太合适，所以我们需要给他封装起来

自定义指令的模块化

首先在我们的src下新建一个directive的目录，目录下新建一个index.js

如图：

 然后将我们写的每个指令都放到一个对应的js中，三个都是这样

 引入进我们的directive下的index.js文件里面

import permissions from "./permissions"
import fontRed from "./font-red";
import style from "./style";

const install = function (Vue) {
    Vue.directive('permissions', permissions)
    Vue.directive('font-red', fontRed)
    Vue.directive('style', style)
}

export default install

最后将index文件引入进main.js

 打开页面测试

一切正常！directive模块化完毕