当你第一次接触vue的时候，一定会使用到其中几个指令，比如：v-if、v-for、v-bind...这些都是vue为我们写好的，用起来相当的爽。如果有些场景不满足，需要我们自己去自定义，那要怎么办呢？下面来一步步学习如何自定义一个属性我们自己的指令。
什么是vue指令？
指令是可以写在DOM元素的小命令，他们以v-为前缀，vue就能识别这是一个指令并保持语法的一致性。如果你需要对HTML进行底层操作的话，这种方式是非常有用。
下面介绍几种指令的使用方式及示例，用example代替了实际的指令。
v-example:实例化一个指令，但这个指令没有参数。如果不传参数会比较不灵活，但是这样就已经操作DOM元素的能力了。
v-example=“value”:这样可以传值到指令中，指令会根据value值来操作html
<div v-if="stateExample">stateExample为true时会显示</div>
v-example="string":使用字符串作为表达式。
<p v-html="'<strong>this is an example of a string in some text <strong>'"></p>
v-example:arg="value":这里可以传参数（arg）,在下面的例子中，我们绑定一个class,然后给这个class设置样式
<div v-bind:class="someClassObject"></div>
v-example:arg.modifier="value":使用修饰符（modifier）,下面的例子可以在click事件上调用preventDefault()。
<button v-on:submit.prevent="onSubmit"></button>
vue自定义指令的基础知识
现在对指令有了大概的了解后，我们再来学习一下如何创建一个自定义指令。
钩子函数
一个指令定义对象可以提供如下几个钩子函数（均为可选）
bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
update:所在组件中的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没用。但是你可以通过比较更新签后的值来忽略不必要的模板更新
componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用。
unbind:只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数（即el、binding、vnode和oldVnode）。
钩子函数参数
指令钩子函数会被传入以下参数：
el:指令所绑定的元素，可以用来直接操作DOM。
binding:一个对象，包含以下属性：
name:指令名，不包括v-前缀。
value:指令的绑定值，例如v-my-directive="1+1"中，绑定之为2
oldValue:指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
expression:字符串形式的指令表达式。例如v-my-directive:"1+1"中，表达式为“1+1”.
args:传给指令的参数，可选。例如v-my-directive:foo中，参数为“foo”
modifiers:一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{foo:true,bar:true}
vnode:Vue编译的虚拟节点。移步VNodeAPI来了解更多详情
oldVnode:上一个虚拟节点，仅在update和componentUpdated钩子中可用。
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo',{
bind:function(el,binding,vnode){
var s=JSON.stringify
el.innerHTML=
"name:"+s(binding.name)+'<br>'+
'value:'+s(binding.value)+'<br>+
'expression:''+s(binding.expression)+'<br>'+
"argument:"+s(binding.arg)+'<br>'+
'vnode keys:'+Object.keys(vnode).join(",")+
}
})
new Vue({
el:"#hook-arguments-example,
data:{
message:'hello!'}
})
函数简写
在很多时候，你可能想在bind和update时触发相同行为，而不关心其他的钩子。比如这样写：
Vue.directive('color-swatch',function(el,binding){
el.style.backgroundColor=binding.value
})
对象字面量
如果指令需要多个值，可以传入一个JavaScript对象字面量。记住，指令函数能够接受所有的合法的JavaScript表达式
<div v-demo="{color:'white',text:'hello'}"></div>
Vue.directive('demo',function(el,binding){
console.log(binding.value.color)//=>"white"
console.log(binding.value.text)//=>"hello!"
})
vue自定义指令的使用场景
在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通dom元素进行底层操作，这时候就会用到自定义指令。下面就来看看vue自定义指令有哪些使用场景。
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
})
一键copy的功能
1.首先建一个js文件（v-copy.js）。定义一个对象。（指令实际上就是一个对象）
important {Message} from 'ant-design-vue';
const vCopy={
/*
bind钩子函数，第一次绑定时调用，可以在这里做初始化设置
el:作用的dom对象
value:传给指令的值，也就是我们要copy的值
}*/
bind(el,{value}){
el.$value=value;//用一个全局属性来存进来的值，因为这个值在别的钩子函数还会用到
el.handler=()=>{
if(!el.$value){
//值为空的时候，给出提示，我这里的提示是用的ant-design-vue的提示，你们随意
Message.warning("无复制内容")；
return;
}
const textarea=document.createElement('textarea');
textarea.readOnly='readonly';
textarea.style.position='absolute';
textarea.style.left="-9999px";
//将要copy的值赋给textarea标签的value属性
textarea.value=el.$value;
document.body.appendChild(textarea);
//选中值并复制
textarea.select();
const result=document.execCommand('Copy');
if(result){
Message.success("复制成功")；
}
document.body.removeChild(textarea);
}
el.addEventListener('click',el.handler);
},
componentUpdated(el,{value}){
el.$value=value；
}，
//指令与元素解绑的时候，移除事件绑定
unbind(el){
el.removeEventListener('click',el.handler);
}
export default vCopy
2.到这里，一键Copy的功能就实现了，最后再说一嘴怎么将自定义指令注册到全局：再新建一个js(directives.js)文件文件来注册所有的全局指令。
import copy from './v-copy';
//自定义指令
const directives={
copy,
}
//这种写法可以批量注册指令
export default{
install(Vue){
Object.keys(directives).forEach(key)=>{
Vue.directive(lkey,directives[key]);
});
};
}
3.最后，在main.js中这样引入：
important Vue from 'vue';
important Directives from"./directives";
Vue.use(Directives);
按钮级别权限控制
权限控制分为页面级别和按钮级别，这两种思路基本是一致的。
页面级别：用户登录后，获取用户role,将role和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。最后通过router.addRoutes动态挂载。现在是通过获取到用户的role之后，在前端用v-if手动判断来区分不同权限对应的按钮的。。
按钮级别：用户登录后，获取用户role,在前端用v-if或者封装一个自定义指令，手动判断来区分不同权限对应的按钮的思路：
登录：当用户填写账号和密码后向服务器验证是否正确，验证通过之后，服务端回返回一个token,拿到token之后（将token存在sessionStorage中，保证刷新新页面后能记住用户登录状态），前端会根据token再去拉取一个user_info的接口来获取用户的详细信息（如用户角色，用户权限，用户名等等信息）。
权限验证：通过token获取用户对应的role,自定义指令，获取路由meta属性里btnPermissions(注：meta.btnPermissions是存放按钮权限的数组，在路由表里配置)，然后判断role是否在btnPermission数组里，若不再即删除该按钮DOM。
路由配置：
path:'/permission',
component:Layout,
name:'权限测试'，
meta:{btnPermissions:['admin','super','normal']},//页面需要的权限
children:[
{
path:'supper',
component:_import('system/supper'),
name:'权限测试页'，
meta:{btnPermissions:['admin','supper']}//页面需要权限，
}，
{
path:'normal',
component:_import('system/normal'),
name:'权限测试页'，
meta:{btnPermissions:['admin']}//页面需要的权限
}]
import Vue from "vue"
const has=Vue.directive('has',{
bind:function(el,binding,vnode){
let btnPermissionArr=vnode.context.$route.meta.btnPermissions;
if(!Vue.prototype.$_has(btnPermissionArr)){
el.parantNode.removeChild(el);
}
}
})
Vue.prototype.$_has=function(value){
let isExist=false;
//获取用户按钮权限
let btnPermissionStr=sessionStorage.getItem("btnPermissions");
if(btnPermissionStr==undefined||btnPermissionStr==null){
return false;
}
if(value.indexOf(btnPermissionsStr)>-1){
isExist=true;
}
return isExist;
};
export {has}
然后在main.js文件引入文件
important has from "./public/js/btnPermissions.js";
页面中按钮只需加v-has即可
<el-button @click="editClick" type="primary" v-has>编辑</el-button>
