vue-cli怎样写自定义指令的代码？

我们在vue1.0时，我们通常自己创造一些指令（例如v-zhou)写，那么我们vue-cli怎么写自己自定义指令呢？

下面我将介绍写法

工具/原料

• cnpm node vue-cli

方法/步骤

1. 1

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

   代码如下：

   import Vue from 'vue'

   具体代码：

   <template>

   </template>

   <script> 

   import Vue from 'vue'

   </script>

   <style>

   </style>

2. 2

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

   代码：

   <div v-zhou="color" >

   百度

   </div>

   具体代码：

   <template>

   </template>

   <script> 

   import Vue from 'vue'

   </script>

   <style>

   </style>

3. 3

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

   export default {

   data(){

   return {

   num:123,

   color:"green"

   }

   }

4. 4

   第四步 你得考虑自定义指令要生效必须依赖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输出查看百度是否变绿，如果是则成功。