应用场景
以后台管理系统为例，每个用户所拥有的按钮权限不一样。管理员配置权限之后，用户登录时，从接口拿到按钮权限列表，然后根据后台数据判断显示哪些按钮。
简单说一下，自定义指令
vue.js官网关于自定义指令的讲解
…
基础概念
vue除了核心功能默认内置的指令（v-model和v-show）还可以注册自定义指令。
在vue2.0中，代码复用和抽象的主要形式是组件。但有的情况下，仍需要对普通dom元素进行底层操作，这时候就会用到自定义指令。
譬如，自定义一个v-focus指令，当页面加载时，输入框将获得焦点
全局自定义
局部自定义
钩子函数
一个指令定义对象可以提供如下几个钩子函数（均为可选）
bind
只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted
被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
update
所在组件的vnode更新时调用，但是可能发生在其子vnode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentupdated
指令所在组件的vnode及其子vnode全部更新后调用。
unbind
只调用一次，指令与元素解绑时调用。
其他
除此之外，还有一些基础概念，钩子函数参数，动态指令参数，等等。
…
官网讲的十分清楚，在此不再多做赘述。
原理
如果对自定义指令的源码感兴趣，博客园也有一篇文章讲的很通透
原理就是：
- 解析vue的属性的时候，遍历每个属性；
- 对象上增加一个directives属性保存指令信息；
- 渲染完成后会执行directives模块的create钩子函数；
- vue 编译生成的虚拟节点，也就是vnode插入到父节点后，
- 依次执行每个函数，也就执行到我们自定义定义的inserted钩子函数了
自定义指令v-has
话休絮烦，言归正传。
今天主要是总结一下：自定义指令v-has，按钮权限判断
登录接口拿到按钮权限列表，存入本地缓存login_user_button_auth中
数据格式如下：
自定义v-has指令的配置
在utils文件夹下，新建haspermission.js文件，在index.js中统一导出
utils文件下的index.js
utils文件夹下的其他js文件也可以统一在index.js里导出
main.js中引入
组件中使用v-has根据按钮权限，判断是否显示该按钮
总结
到此这篇关于vue自定义v-has指令实现按钮权限判断的文章就介绍到这了,更多相关vue自定义v-has指令内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
