0%

[Vue] Vue.js 基礎概述 (下)

發表於 更新於 分類於 Disqus：

上一篇有提到一部份的基礎指令，今天要繼續介紹上一篇沒講完的部分。

v-on — 事件監聽

在要監聽的 HTML 元素上加上 v-on: 事件 = "方法名稱()"，在 data 物件同層新增 methods 物件，裡面寫入一個特性，其值為函式（=方法），這個特性的名稱就是要填入 v-on 屬性中的「方法名稱」。 v-on: 的縮寫是 @ 。

範例：

之前學 this 的時候曾學到，this 指向的是它所在的函式隸屬的物件，因此可能會有人疑惑為何 reverseText() 中是寫成 this.newText 跟 this.text，畢竟 reverseText 所在的物件是 methods，那 this 不就是指向 methods 嗎？

在這裡可以把 data 想成 JavaScript 裡的全域變數（會變成 window 物件的其中一個特性），先宣告好就可給 method 物件裡面的方法去使用。

預先定義資料結構

由於畫面跟資料可以雙向地變動，因此預先把程式碼的架構給定義出來是很重要的。

修飾符

一種加在指令後面的後綴，例如在 v-on 後面加上 .prevent 修飾符就代表了 event.preventDefault()，使用修飾符可以讓我們少寫幾行程式碼。跟事件搭配的後綴在官方文件的事件處理章節有列出來。

動態切換 class

在要動態切換 class 的 HTML 元素上用 v-bind 來設定參數，結構像這樣：

1
2
<div class="box" :class="{ '要加入的 className': 判斷式}" ></div>
<!-- 在大括號內允許傳入多個要切換的 className -->

以切換 className 來說，通常判斷式的內容會寫入一個 data 物件中的特性，而該特性的值為布林值。

以「按下按鈕就讓一個正方形 box 旋轉」為例：

在這個範例中，按下按鈕觸發的事件，會將 data 物件中 isTransform 特性的值顛倒，再配合 .box 增加 className 的條件，就達到 toggle .rotate 的效果。

computed — 計算屬性

computed 物件跟 data 物件同層，它裡面放的只會是有取特性名稱的方法，這些方法用來 return 一個值且儲存在方法對應的特性裡（類似變數的性質）。

範例：

computed 物件的 reverseText() 中，已經定義了回傳的值是以 this.text 的值為計算基礎（這裡的 this 依然是指全域），一旦 data 物件裡的 text 值變更，reverseText() 回傳的值也會隨之變動。

以執行結果來說，computed 跟 methods 裡面的方法，輸出的結果確實是一樣的，但是兩者執行函式的方式不同。
computed 裡的方法不是依靠觸發來執行的，只要它所依附的計算基礎沒有變動，就不會再次執行，只會固定輸出之前計算的結果；而 methods 則是依靠觸發，每次觸發都會再次執行函式。

表單輸入綁定

將使用者在表單上輸入的內容記錄到 Model 裡，主要就是用 v-model 進行資料綁定。

  • 單一個 checkbox：設定 v-model 指向對應的特性，這樣點選時就能切換布林值。
  • 多選：checkbox 所有選項都要設定 value 屬性及 v-model，且 v-model 都要指向 data 裡同一個陣列，這樣勾選選項時，每個選項的 value 就會寫進陣列裡。
  • 單選：radio 也是所有選項都要設定 value 屬性及 v-model，且 v-model 都要指向 data 裡同一個特性，這樣就只會寫入一個值。
  • <select> 下拉選單：<select> 用 v-model 指向對應的特性，<select> 裡面是 <option> 選項。第一個 <option> 可以把 value 屬性的值空著，文字就寫些「請選擇」之類的初始選項，如果不想被使用者誤觸的話，可以再加上 disabled 屬性。其他選項都要填入 value 值，才能正確寫入對應特性中，不過 value 值不一定要跟選項文字相同。

元件 (components) 基礎

元件可以複用，它在 HTML 中以標籤的形式表現，而標籤名是自定義的元件名稱。

之前的指令都是寫在 Vue 實例裡，元件則是寫在 Vue 實例外面，而且順序要擺在 Vue 實例之前。因為解譯器是依序執行的，它會先讀到 HTML 的元件標籤，所以必須讓解譯器在 JS 檔案中馬上讀到關於元件的程式碼。

範例：

元件的資料會寫在 Vue.components() 的小括號裡面，小括號內有兩個參數，第一個參數是自訂元件的名稱（跟在 HTML 的標籤名相同），第二個參數是一個物件，該物件內要寫入一個 data 特性跟一個 template 特性。

data 特性對應的是一個函式，該函式必須 return 一個物件，該物件裡面放的就是專屬於這個元件的資料。

data 寫好後，開始寫 template 特性。template 特性負責的是這個元件的 HTML 結構，所以對應的值是用反引號包起來的「含有 HTML 標籤的字串」，在這裏面可以運用 data 的內容。

雖然我們在 HTML 中寫的元件是用元件名稱當標籤，但是用 chrome 開發人員工具看 HTML 結構時會發現，原本的元件標籤呈現出來的程式碼會是 template 組出來的內容。

以上就是 Vue 的基礎指令，這些指令都還有一些使用細節可以延伸來介紹，之後會再整理相關筆記。