第一步在你自己的组件（a.vue) 引入vue

代码如下：

import Vue from 'vue'

具体代码：

<template>

</template>

<script> 

import Vue from 'vue'

</script>

<style>

</style>

第二步 引入之后，你再模板里面申明，你自定义指令的名字。例如v-zhou

代码：

<div v-zhou="color" >

百度

</div>

具体代码：

<template>

</template>

<script> 

import Vue from 'vue'

</script>

<style>

</style>

第三步 你 引入你需要data属性，例如你定义指令是像bootstrap一样将button按钮变色，那么你必须再data里面声明代码如下：

export default {

data(){

return {

num:123,

color:"green"

}

}

第四步 你得考虑自定义指令要生效必须依赖vue的

Vue.directive指令代码如下：

Vue.directive('zhou',function(el,binding){

el.style="color:"+binding.value;

})

注：这里el一般为固定的写法，照抄即可，binding也基本差不多

这句代码的意思就是通过binging来获得上面data里面color值，而el.style指的就是你的值赋予css颜色样式的

具体代码：

<template>

<div v-zhou="color" >

百度

</div>

</template>

<script> 

import Vue from 'vue'

Vue.directive('zhou',function(el,binding){

el.style="color:"+binding.value;

})

export default {

data(){

return {

num:123,

color:"red"

}

}

}

</script>

<style>

</style>

注：当你cnpm run dev输出查看百度是否变绿，如果是则成功。