Je code donc je suis là.

0%

Vue.js Custom Directives 自定義指令

什麼時候會用到自定義指令?在 Vue 內建的指令無法滿足需求或需要一個特別的功能時,就可以自己攥寫自定義指令,好處是可以重複使用。

自定義指定有兩種:全域自定義指令與局部的自定義指令。有時候我們在一個頁面裡可能會引入或增加好幾個 Vue 的實例,如果是全域的自定義指令,表示所有的 Vue 實例都可使用這個指令,但如果是局部自定義指令,需要指定能使用這組指令的 Vue 實例。

先來看 codepen :
Vue.Js Custom Directives 自定義指令

全域的寫法

1
2
3
4
// Global 全域自定義指令 ps. directive 沒有 s
Vue.directive('my-directive', function(el, binding) {
el.innerHTML = binding.value.toupperCase();
});

局部的寫法

1
2
3
4
5
6
7
8
9
10
11
12
// 局部的自定義指令 ps. directives 有 s
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toUpperCase()
}
}
// 也可以寫成
'my-directive'(el, binding) {
el.innerHTML = binding.value.toUpperCase()
}
}

如何使用

1
v-my-directive = 'xxx';

實作兩個自定義指令

  1. 功能的類型為v-text,功能是可將字串轉換成大寫,取名為v-upper-text
  2. 功能的類型為v-text,功能是可將字串轉換成小寫,取名為v-lower-text

需要注意的是,我們自訂的指令名,並不包含v-例如上述要實作的v-upper-text,指令名為upper-textv-一但定義了這些自定義的指令,在使用時就需要加上v-。而只最終會被寫在 HTML 的元素標籤裡。

這個指令名會對應到一個「處理函式」,如以下範例的Vue.directive()的第二參數
以下面的範例的 callback 函式來看,有兩個參數,第一個為el表示使用這個指令的標籤,第二個參數binding我們可以試著console.log()出來觀察。

1
2
3
4
5
6
7
8
<div id="app1">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div>
<div id="app2">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 註冊定義全局指令
// el : 指令屬性的所在標籤物件
// binding : 包含指令相關訊息的資料物件
Vue.directive('upper-text', function(el, binding) {
console.log(el, binding);
// 把改變好的內容在指定回去
el.innerHTML = binding.value.toUpperCase();
});

const vm = new Vue({
el: '#app1',
data: {
msg1: 'Hello Paris'
},
// 註冊局部定義指令,只會對 #app1 這個實例有效
directives: {
'lower-text'(el, binding) {
el.innerHTML = binding.value.toLowerCase();
}
}
});

const vm = new Vue({
el: '#app2',
data: {
msg2: 'Hello Taipei'
}
});