在vue2中使用自定义指令实现按钮权限

自定义指令是 Vue.js 的一种特殊功能，可以让我们自定义一些特殊的 DOM 属性，这些属性可以影响元素的行为。

import Vue from 'vue';

Vue.directive("mone",{   //Vue.directive("mone",{}): 这行代码在 Vue 对象上定义了一个新的指令 "mone"

    inserted(dom,val){   //  inserted(dom,val): 这是一个回调函数，当元素被插入到 DOM 中时会被调用。dom 是被绑定的元素，val 是绑定的值。
        if(!val.value.includes(localStorage.role)){   
            dom.remove();
        //if(!val.value.includes(localStorage.role)){ dom.remove(); }: 这个判断语句检查 val.value（即元素的 value 属性）是否包含本地存储的 role。如果不包含，那么 dom.remove() 会从 DOM 中移除这个元素。
        }  
    }
})

v-on和v-model是Vue中两个重要的指令。

v-on指令用于监听DOM事件并触发Vue实例中定义的方法。通过该指令，可以在Vue中实现事件监听、事件处理等功能。

v-model指令用于将输入框的值和Vue实例中的数据进行双向绑定。它的本质是语法糖，等价于用v-bind和v-on组合实现的。

v-text v-html v-show v-if v-else-if v-else v-for这些指令极大地简化了前端开发的工作。使用这些指令时，需要结合具体的业务场景，灵活运用，以提高代码的复用性和可读性，并确保代码的性能和稳定性。