这篇文章给大家分享的是“Vue中v-has指令应用场景是什么，如何使用”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

应用场景

以后台管理系统为例，每个用户所拥有的按钮权限不一样。管理员配置权限之后，用户登录时，从接口拿到按钮权限列表，然后根据后台数据判断显示哪些按钮。

简单说一下，自定义指令

Vue.js官网关于自定义指令的讲解

cn.vuejs.org/v2/guide/cu…

基础概念

Vue除了核心功能默认内置的指令（v-model和v-show）还可以注册自定义指令。

在Vue2.0中，代码复用和抽象的主要形式是组件。但有的情况下，仍需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。

譬如，自定义一个v-focus指令，当页面加载时，输入框将获得焦点

?

< input v-focus>

全局自定义

?

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

局部自定义

?

//如果想注册局部指令，组件中也接受一个 directives 的选项： directives: {    focus: {      // 指令的定义      inserted: function (el) {        el.focus()      }    } }

钩子函数

一个指令定义对象可以提供如下几个钩子函数（均为可选）

bind

只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted

被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）

update

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

componentUpdated

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

unbind

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

其他

除此之外，还有一些基础概念，钩子函数参数，动态指令参数，等等。

cn.vuejs.org/v2/guide/cu…

官网讲的十分清楚，在此不再多做赘述。

原理

如果对自定义指令的源码感兴趣，也有一篇文章讲的很通透

//www.zzvips.com/article/209716.htm

原理就是：

• 解析Vue的属性的时候，遍历每个属性；
• 对象上增加一个directives属性保存指令信息；
• 渲染完成后会执行directives模块的create钩子函数；
• Vue 编译生成的虚拟节点，也就是VNode插入到父节点后，
• 依次执行每个函数，也就执行到我们自定义定义的inserted钩子函数了

自定义指令v-has

话休絮烦，言归正传。

今天主要是总结一下：自定义指令v-has，按钮权限判断

登录接口拿到按钮权限列表，存入本地缓存LOGIN_USER_BUTTON_AUTH中

数据格式如下：

?

[      {          "checked" : false ,          "component" : "" ,          "createTime" : "2019-06-29 18:21:06" ,          "createUser" : "026a564bbfd84861ac4b65393644beef" ,          "icon" : "" ,          "id" : "1503273153861066776" ,          "name" : "今日采集（案卷）" ,          "open" : "true" ,          "parentId" : "2328050996633395469" ,          "parentName" : "首页" ,          "permission" : "sys:index:vol" ,          "sort" :103,          "status" : "0" ,          "type" : "2" ,          "updateTime" : "2021-01-27 15:51:15" ,          "updateUser" : "026a564bbfd84861ac4b65393644beef" ,          "url" : ""      } ]

自定义v-has指令的配置

在utils文件夹下，新建hasPermission.js文件，在index.js中统一导出

?

const hasPermission = {      install (Vue, options) {          Vue.directive( 'has' , {              inserted: (el, binding, vnode)=>{                  filterGlobalPermission(el, binding, vnode);              }          });      } }; /**   * 全局权限控制   */ export const filterGlobalPermission = (el, binding, vnode) => {      let permissionList = [];      let authList = JSON.parse(localStorage.getItem( 'LOGIN_USER_BUTTON_AUTH' ) || "[]" );      for (let auth of authList) {          permissionList.push(auth);      }      if (!permissionList.length) {          el.parentNode.removeChild(el);          return ;      }      let permissions = [];      for (let item of permissionList) {          permissions.push(item.permission);      }      if (!permissions.includes(binding.value)) {          el.parentNode.removeChild(el);      } } export default hasPermission;

utils文件下的index.js

utils文件夹下的其他js文件也可以统一在index.js里导出

?

import hasPermission from './hasPermission' export { hasPermission }

main.js中引入

?

import { hasPermission } from '@/utils' Vue.use(hasPermission)

组件中使用v-has根据按钮权限，判断是否显示该按钮

?

< el-button v-has = "'sys:arch:add'" type = "primary" size = "mini" icon = "el-icon-plus" @ click = "add('1')" >      新增 </ el-button >

到此，关于“Vue中v-has指令应用场景是什么，如何使用”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。如果想要学习更多的相关知识，欢迎关注群英网络，小编每天都会给大家分享实用的文章!