1.自定義指令

1.1 什么是自定義指令

vue官方提供了v-text、v-html、v-model、v-if等一些常用的指令。除此之外vue還允許開發(fā)者自定義指令。

1.2 自定義指令的分類

vue將自定義指令分為 兩類

• 私有自定義指令
• 全局自定義指令

1.3 私有自定義指令

在每個(gè)vue組件中，可以在directives節(jié)點(diǎn)下聲明私有自定義指令

• 私有自定義指令只在這個(gè)組件中生效

示例代碼如下：

 directives: {
    color: {
      bind(el) {
        el.style.color = "red";
      },
    },
  },

• color:指定的是指令的名稱，使用的時(shí)候要加前面加個(gè)v-,v-color
• bind:只會調(diào)用一次，是指 指令第一次綁定到元素時(shí)會調(diào)用 （bind函數(shù)觸發(fā)的時(shí)機(jī)是指令第一次綁定到元素身上時(shí)觸發(fā)）
• el：是指綁定的這個(gè)dom元素本身
• v-color這個(gè)指令的作用就是給指定dom元素設(shè)置字體顏色為紅色

使用如下：

90.png

實(shí)現(xiàn)效果：

91.png

1.3.1 獲取指令綁定的值 binding

92.png

控制臺輸出

93.png

• name:指令的名稱
• rawName:指令的全稱
• value:指定綁定的值

所以我們可以通過第二個(gè)參數(shù)的屬性value（參數(shù)名隨便取，只要符合標(biāo)識符的規(guī)則）來動(dòng)態(tài)設(shè)置值，而設(shè)置一個(gè)固定的值。

所以可以將指令修改為：

 directives: {
    color: {
      bind(el, binding) {
        el.style.color = binding.value;
      },
    },
  },

具體實(shí)現(xiàn)效果如下：

94.png

1.3.2 update函數(shù)（頁面數(shù)據(jù)發(fā)生更新，會觸發(fā)這個(gè)函數(shù)）

• 但第一次指令綁定到元素身上時(shí)不會觸發(fā)update函數(shù)，只有后續(xù)更新才會觸發(fā)這個(gè)update函數(shù)，bind函數(shù)和update函數(shù)的參數(shù)列表是一樣的。

95.png

1.3.3 函數(shù)簡寫

如果bind函數(shù)和update函數(shù)中的邏輯完全相同，則對象格式的自定義指令可以簡寫為函數(shù)格式：

96.png

等價(jià)于下面的這些代碼：

97.png

1.4 全局自定義指令

全局共享的自定義指令需要通過 Vue.directive()進(jìn)行聲明

// 第一個(gè)參數(shù)為字符串，指令的名稱
// 第二個(gè)參數(shù)是一個(gè)對象，用于接收指令的參數(shù)值
Vue.directive("color",{
  bind(el,binding){
    el.style.color=binding.value;
  },
  update(el,binding){
    el.style.color=binding.value;
  }
})

以下是上面的代碼簡寫的形式（因?yàn)閎ind和update的邏輯處理是一致的）：將bind函數(shù)和update函數(shù)寫在一塊了

// 第一個(gè)參數(shù)為字符串，指令的名稱
// 第二個(gè)參數(shù)是一個(gè)對象，用于接收指令的參數(shù)值
Vue.directive("color",function(el,binding){
  el.style.color=binding.value;
})

2. 總結(jié)

自定義指令.png