Vue中自定義指令的使用方法！

        除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。注意，在 Vue2.0 中，代碼復用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。舉個聚焦輸入框的例子，如下：(咳咳，借官網的用一用)

1、定義全局的自定義變量

main.js

Vue.directive('color',{
  inserted(el){
//  各單位注意，這里的el獲取的是標簽元素，說白了就是可以直接操作DOM
    console.log(el)
    el.style.color = "red"
  }
})

app.vue，這里直接寫v-color就可以；

<div >前端偽大叔</div>
<div v-color>前端偽大叔</div>

 

 2、自定義指令中，添加屬性；

Vue.directive('color',{
  bind(el,binding){
    switch(binding.value){
      case 'red':
        el.style.color = 'red' 
        break;
      case 'blue':
        el.style.color = 'blue'
        break;
    }
  }
})

App.vue

<div >前端偽大叔</div>
<div v-color="'red'">前端偽大叔</div>
<div v-color="'blue'">前端偽大叔</div>

        可以通過給自定義的屬性，添加屬性的方式來修改顏色；當然不僅僅只能修改顏色這么簡單，因為el直接獲得了DOM，所以你懂得！

 

3、組件內指令-只有自己組件可以使用

注意：directives是一個對象，里面定義的自定義指令也是對象！

//  template
<div >前端偽大叔</div>
<div v-color>前端偽大叔</div>

//  script
//  這里是對象
 directives:{ 
//  每個指令都是一個對象
   color:{  
     inserted(el){
       el.style.color = 'cyan'
     }
   }
 }

 

4、組件內的自定義指令，增加屬性

//  template
<div v-color="'red'">前端偽大叔</div>
<div v-color="'blue'">前端偽大叔</div>
//  script
//  這里是對象
 directives:{
//  每個指令都是一個對象
   color:{
     bind(el,binding){
       if(binding.value == 'red'){
         el.style.color = 'red'
       }else if (binding.value = 'blue'){
         el.style.color = 'blue'
       }
     }
   }
 }

 

給大家奉上地址：https://cn.vuejs.org/v2/guide/custom-directive.html

        如果大家喜歡的話，歡迎關注“前端偽大叔”我將為您不間斷的分享前端學習知識！