之前在练习的项目里面用到了Vue自定指令，用一个自定的has指令来判断是否拥有某个属性，并且按需显示。
项目页中
<el-table-column label="操作" width="200">
<template slot-scope="{row}">
<el-button :type="row.status ? 'danger' : 'success'" @click="shieldcomment(row)">
{{getbuttonstatus(row.status)}}
</el-button>
<el-button type="danger" @click="deletecomment(row)" v-has="'delete_comment'">删除</el-button>
</template>
</el-table-column>
main.js中
Vue.directive('has', {
inserted: function (el, binding) {
if (!permissionJudge(binding.value)) {
el.parentNode.removeChild(el)
}
}
})
v-has就是自定的指令，是vue原生中不存在的，自定义指令分为全局指令和组件指令，其中全局指令需要使用directive来进行定义，组件指令需要使用directives来进行定义。
全局自定义指令
在main.js中定义通过
Vue.directive(name,{})
来定义
下面是官方文档的定义
name
name对应的是自定义标签的名字，定义指令的时候不需要带v-，但是在调用的时候需要带v-。
{}
第二个参数是一个对象，包括五个自定义组件的钩子函数
-
bind函数：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
-
inserted函数：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
-
update函数：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
-
componentUpdated函数：指令所在组件的VNode及其子VNode全部更新后调用。
-
unbind函数：只调用一次，指令与元素解绑时调用。
如果不需要其他钩子函数，可以直接简写为：directive(“focus”,function(el,binding){})
{}对象中对应的不同钩子函数还有对应的几个参数
除了el参数以外其他都是只读的，不要直接更改。
-
el：指令所绑定的元素，可以用来直接操作 DOM。
-
binding：一个对象，包含以下 property：
-
name：指令名，不包括
v-
前缀。
-
value：指令的绑定值，例如：
v-my-directive="1 + 1"
中，绑定值为
2
。
-
oldValue：指令绑定的前一个值，仅在
update
和
componentUpdated
钩子中可用。无论值是否改变都可用。
-
expression：字符串形式的指令表达式。例如
v-my-directive="1 + 1"
中，表达式为
"1 + 1"
。
-
arg：传给指令的参数，可选。例如
v-my-directive:foo
中，参数为
"foo"
。
-
modifiers：一个包含修饰符的对象。例如：
v-my-directive.foo.bar
中，修饰符对象为
{ foo: true, bar: true }
。
-
vnode：Vue 编译生成的虚拟节点。
-
oldVnode：上一个虚拟节点，仅在
update
和
componentUpdated
钩子中可用。
所以看完上面的定义再看代码就可以很好的划分出来
组件指令
组件指令就是定义在每个单独组件之中的，对每个组件生效，具体定义如下，其他内容和全局的相同
new Vue({
directives:{
dirName:{
//定义指令
}
}
});
