【Vue.js 學習筆記】08. Vue 常用 API

本節內容包含下述子章節:

  1. 使用 Extend 避免重複造輪子
  2. Filter 自訂畫面資料呈現格式
  3. 無法寫入的資料,用 set 搞定他
  4. Mixin 混合其它的元件內容
  5. 使用 Directive 開發自己的互動 UI


使用 Extend 避免重複造輪子

這邊跟 Java 一樣中使用 extends 作為其擴充父類別的關鍵字,不過它雖然關鍵字是 extends 有加 s ,但實質是不支援多重繼承的。

實做方式如下,先使用 Vue.extend 實做要被擴充父類別:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// extend  
var newExtends = Vue.extend({   
   data: function () {   
      return {   
         data: {},   
         extendData: '這段文字是 extend 得到'
   }}}),
   mounted: function () {
      console.log('Extend:', this)
   },
   computed: {
      getValue(){
         console.log('getValue Extend:', this)
   }
},


在子類別中,去繼承並客製化所需求的部份:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var childOne = {
   extends: newExtend,
   computed: {
      getValue(){
         console.log('getValue childOne:', this)
   }
}   

var childTwo = {
   extends: newExtend,
   template: '#row-component-two',
   mounted: function () {
      console.log('childTwo:', this)
   }
}


就我自己理解當使用 Extend 擴充父類別時,Object 會被繼承,(如:mounted,computed)。若在子類別的 Object 中宣告與父類別相同名稱的 變數函式 名稱,則會 Override 父類別的。是說不曉得有 super 可以用?


2019.05.10 補充
mozilla 有看到 super 的用法,但在使用時它一直報錯,懷疑與 Vue 本身有關係,詢問講師後得到的回答是:「沒辦法使用super,這邊 extend 是 VUE API,所以與 ES6 Class Extend 是沒有關聯的」



Filter 自訂畫面資料呈現格式

Vue.js 還有提供 Filter(過濾器)的功能,主要用於處理格式化文字等狀況。filter 可重複使用,一個值可以套用多個 filter。


filter 一樣可以分為 全域局部,全域的宣告是在外層使用 Vue.filter

1
2
3
Vue.filter(filterName,function(n){
   ...
})


而局部宣告是在元件中加入 filters 的物件

1
2
3
4
5
6
7
8
9
10
11
12
var child = {
   data:function() {
      return {
         ...
      }
   },
   filters: {
      filterName:function (n) {
         ...
      },
   }
}


如要使用 filter 過濾器,則在 Mustache 中在變數後方使用 「|」(pipe)符號聯集多個 filter,執行時由左向右執行,它會將 pipe 符號左方的結果當作參數傳數入右方的 filter ,所以在撰寫 filter function 時記得宣告參數。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<td>
   {{ item.icash | separator | dollarSign}}
</td>

filters: {
   dollarSign: function (n) {
      return `$ ${n}`
   },

   separator: function (n) {
      return n.toFixed(2).replace(/./g, function (c, i, a) {
         return   i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c;
      });
   }
},



無法寫入的資料,用 set 搞定它

在第四章的進階模板語法介紹中,有提過 Vue.set(),那時說過 Vue 無法探測普通的新增屬性,因此必須使用 Vue.set( target, key, value ) 強制將資料寫入視圖中,它才能在 UI 上反應。

如過要確認物件的內容是否有被綁定在 DOM 中,可用 console.log 印出 this 確認 Vue 的內容,如果 物件的元素中不包含 get 與 set 時,下圖上框,代表資料結構並未被綁定在 DOM 中

Imgur


未被綁定在 DOM 的資料,雖然 log 或 tool 上看到的資料內容可能正確,但並不會觸發 UI 的更新。

不過 get 與 set 似乎只有物件才有,其他變數型態如 String、boolean 並沒有,似乎沒有其他方式可以觀察。…不過好像也不用觀察…直接看有沒有在 data 裡面就好了 XD



Mixin 混合其它的元件內容

如果說 extend 是繼承的概念,它會繼承父類別的所有行為。而 mixin 有點類似 Util 或 Helper,在一旁用物件將元件的功能寫好,讓使用者可以直接程式中宣告 mixins 後傳入使用(這邊的 s 總算加對了…),而一個元件可以傳入多的物件,需注意傳入的時,需以陣列方式傳入,即:

1
mixins:[object1, object2]


完整程式碼如下:

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
29
// 用物件將元件的功能寫好
var mixinFilter = { 
   template: '#row-component',
   filters: {
      dollarSign: function(n) {
         return `$ ${n}`
      },
      separator: function (n) {
         return n.toFixed(2).replace(/./g, function (c, i, a) {
            return   i && c !== "." && ((a.length - i) % 3 === 0) ? ',' + c : c;
         });
      }
   },
            
var mixinMounted = {
   mounted() {
      console.log('這段是 Mixin 產生')
   }
}

Vue.component('row-component', {
   props: ['item'],
   data: function() {
      return { 
         aAata: {}, 
      }
   },
   mixins:[mixinFilter, mixinMounted],
);



使用 Directive 開發自己的互動 UI

先把文件啃一啃,尤其 Hook FunctionsDirective Hook Arguments 的部份。

先看一個簡單的範例先

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
   // v-focus = "v-" + directive name
   <input type="email" v-model="email" v-focus>
</div>   

<script>
// focus 為 directive name, html 中會使用 "v-" + directive name,來呼叫這個指令
Vue.directive('focus', {
   // 定義生命週期該執行的動作,function 中可以傳入的參數在文件中 Directive Hook Arguments
   // 有定義。
   inserted: function(el) {
      el.focus()
   }
})
</script>


通常 function 常用的參數有

  • el:指令所绑定的元素,可以用来直接操作 HTML
  • binding:directive 所自帶的一些屬性
  • vnode:Vue 的虛擬節點

這邊需要搭配 console.log 印出 this,才會比較清楚要對這些參數下的哪些元素做操作。



其他連結

  1. 【Vue.js 學習筆記】00. 目錄



參考資料

  1. 六角學院-Vue 出一個電商網站|Udemy
  2. Vue.js: Filter 過濾器|Summer。桑莫。夏天
  3. Vue.js: Mixins|Summer。桑莫。夏天