「Vue.js 學習筆記 Day13」- `Vue實例`

Pierce Shih

Published in

皮爾斯的自學旅程

6 min readJul 16, 2019

程式海無涯，聽說永遠學不完，那我只好一點一點把它們寫下來囉！

上兩篇完整介紹了 ES6 解構賦值（destructuring）的物件和陣列篇，而此篇內容透過範例說明何謂 Vue實例 和相關的實務操作。

Vue實例簡介

Vue實例，顧名思義是使用Vue()建構式來建立的物件，在創建時需要傳入一個不同屬性和方法的物件，常見如下面五點：

el：綁定 DOM 元素
data：綁定的資料
methods：操作不同 DOM 元素的方法
computed：需要計算後才能使用的屬性
watch：偵聽功能

實例(instance) V.S 類別

介紹實例之前，讓我們先從類別 Class 切入吧。

類別 class：主要用於形容某樣事物具備什麼樣的屬性和方法，例如，以鬧鐘來說，它有三個指針，分別為時針、分針、秒針，分針每轉一圈則會驅動時針往前一格。

實例 instance：根據剛才說明的 class 類別概念，透過下列語法var clock = new Clock(); 建立一個實際的個體，而實例也可以看成一個物件。因此，天生具備 class 類別的屬性和方法，如同兩個鬧鐘都會有時針、分針、秒針，但它們可能會有不一樣的顏色，這就是類別和實例的差異。

**Photo Credit by** **Pang Yuhao** **from** **unsplash**

每個 Vue 應用都是從創建一個新的 Vue實例 開始，如下列程式碼。

let app = new Vue();

接下來，我們將正式進入 Vue實例 的介紹：

1. el（element）

建立 Vue實例 後，需要賦予 Vue 工作範圍，讓 Vue 與 HTML元素 互相掛載，以便他能將資料正確傳遞到相對應到的 #app元素之中，如下方程式碼：

let app= new Vue({ 
    el: ‘#app’
})

2. data

在 Vue實例 裡使用data物件來記載資料內容或狀態，常見的渲染方式為使用雙花括號{{}} 。

<div id="app">   
  <div> {{title}} </div> 
</div>let app = new Vue({ 
  el: “#app” , 
  data: { 
    title: “皮爾斯的自學旅程” 
  } 
})

3. method

如同先前學習模板語法 v-on 的使用方法，簡單說就是互動的函式，需要觸發才會運作，常用來「修改資料內容」，讓我們透過一個簡單範例說明。

使用者故事：我們希望每點擊一次 button 按鈕，畫面上的數字就會 +1，因此，我們需要透過下列三個步驟來完成：

Step 1：在 data 中定義 count 的資料，起始值為 0 。
Step 2：在 methods 中定義 addOne 屬性，並宣告一個函式。
Step 3：將 addOne 屬性，綁定於 button 按鈕，實踐原先預期的情況。

詳細程式碼如下：

<div id="app">   
  <div> {{count}} </div>   // 數字呈現處
  <button v-on:click="add"> +1 </button> // 按鈕
</div><script> 
let app = new Vue({   
  el:"#app",   
  data:{     
   count: 0   
  },   
  methods:{     
   add(){
    this.count+=1;
   }   
  } 
}); 
</script>

4. computed

computed和methods一樣，屬性裡面放的不是值，而是函式，一般來說不會修改資料，只會在監控資料更動後，重新運算結果呈現於畫面上，因此，computed 的函式當中一定要 return 一個值，代表計算後的結果。

讓我們實際來看一個數字加總的案例。

Step 1：在 data 中定義 a 資料為 6 ，b 資料為 3 。
Step 2：在 computed 中定義 countTotal 屬性，並宣告一個函式，並回傳兩者加總的數字
Step 3：以雙花括號將資料渲染於畫面呈現。

程式碼如下：

<div id="app2">   
  {{countTotal}}
</div><script> 
 var app2 = new Vue({   
  el:"#app2",   
  data:{     
    a: 6,     
    b: 3,  
  },   
  computed:{     
    countTotal(){       
     return parseInt(this.a) + parseInt(this.b);     
    }   
  } 
})
</script>

5. watch

watch是一個偵聽器，偵聽指定的資料，如 data或computed的屬性，資料狀態一有變動，則觸發 watch 裡的韓式。

讓我們實際來看一個動畫自動切換的案例。

使用者故事：當使用者點擊按鈕時，可透過 trigger 觸發旋轉 box、並在三秒後改變回來。

Step 1：在 data 中定義 trigger 資料型態為 boolean ，預設為 false 。
Step 2：在 methods 中定義 opentrigger 屬性，並宣告一個函式，可將 trigger 改變為 true 。
Step 3：在 methods 中定義 closetrigger 屬性，並宣告一個函式，並透過 setTimeout()非同步事件於 3 秒後再將 trigger 調整為預設值 false 。
Step 4：在 watch 中偵聽 trigger 屬性，若其資料一有改變，則會觸發 closetrigger 屬性，將 box 旋轉回原樣。