[Vue] 進階指令 / 模板語法 （下）

v-if、compued 與 watch、表單操作、事件修飾符

澳洲顯然是個度過餘生的理想國度

本篇筆記要繼續分享 Vue 中一些指令的進階用法與使用細節，基本上是 Vue 基礎概述篇的延伸，不過也會提到一些新的東西。

我超不會寫前言，就不廢話了，直接開始吧！

v-if / v-else / v-if-else

在一個 HTML 元素上使用 v-if="data資料"，當資料的值為 true 時才會渲染這個 DOM；而在 v-if 相鄰的 HTML 元素上使用 v-else，就能把 v-if 判斷為 false 的資料渲染在這個 DOM 上。

v-else-if 用於渲染條件多於兩個以上時，第一個條件用 v-if="條件"，第二跟第三個就可以用 v-else-if="其他條件" 。

v-if 跟 v-show 的差異

v-show 是控制 HTML 元素的 display，所以 v-show為 false 的 HTML 元素其實還是有被渲染出來，只是 display: none而已； v-if 是指渲染出符合條件的 HTML 元素，不符合的就不會渲染。

模板（<template>）

<template>的使用時機在於，想要使用 Vue 指令，但不希望 HTML 標籤輸出時。在 <template> 裡的子元素不會被渲染出來，可以一次控制多個 DOM。如果在 <template> 使用 v-if，那麼條件為 true時，就能渲染出 <template> 內的子元素。

compued 與 watch

computed 與 watch 都是專門放函式的 Vue 實例特性，兩者很像，因為都會隨著資料做變化，但兩者最大差異在於會不會變動 data 資料，computed 裡的 function 在資料變動時才會執行、渲染；而 watch 相反，是主動去監控及變動 data 資料，當資料變動時就執行特定 function。

所以可以整理成以下的比較：

• methods：需要主動觸發，且可以多次重複觸發
• computed：當資料出現變化且需要改變畫面的 function 放這裡
• watch：監控特定資料變化的 function 就放這裡

watch: {
  監控的 data 特性: function(){
    setTimeout(()=>{
      this.data特性 = false;
    }, 3000);
  }
}

表單細節操作

用 v-for 製作多個 <option>：

<select> 下拉式選單標籤裡面包的是好幾個 <option>，也就是選項，可以透過 v-for 製作多個 <option> 。

1. 在 data 先寫好要放進 option 的資料（陣列格式）
2. 寫一個 HTML <option>，並設定 :value="item"，及 v-for="item in 資料陣列"
3. 在 <option> 中插入 {{ item }}

<select> 多選：

跟上面的程式碼大同小異，不過要在 <select> 多加一個 multiple屬性。

checkbox 與 data 的切換

在 checkobx 使用 true-value 與 false-value 屬性，例如下面的程式碼，當勾選（ true）時會使 data.sex 為男生，沒勾選（ false）時會使 data.sex為女生。

// data 裡其中一筆資料如下：
sex: "男生",
// HTML：
<input type="checkbox" id="sex" v-model="sex" true-value="男生" false-value="女生">
<label for="sex">{{ sex }}</label>

表單欄位修飾符

• .lazy：跟 v-model 搭配使用，原本 Vue 預設輸入的資料會與 data 同步，使用 .lazy 後就相當於使用 change 事件
• .number：將字串轉型為數字
• .trim：將字元間的空白去除

事件修飾符

以下修飾符都是加在 v-on: 事件後面的後綴：

.stop — 中止冒泡，等於 event.stopPropagation()。

.prevent — 取消預設送出的行為，等於 event.preventDefault()。

.capture — 監聽事件時使用事件捕捉模式。

.self — 使用這個修飾符的作用是，當 event.target 是綁定監聽的元素時才觸發函式。

.once — 使用這個修飾符的作用是，讓事件只被觸發一次。

按鍵修飾符

在鍵盤事件後加上特定 keyCode 或別名，當事件是從特定鍵觸發時，才執行函式。

又分成以下兩種修飾：

• 按鍵碼別名修飾：因為 keyCode 很難記，所以 Vue 提供常用的按鍵別名可以拿來當修飾符，例如 .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
• 系統修飾鍵：在事件後面加系統修飾鍵當後綴，使用時就必須搭配游標或別名修飾按鍵，才會觸發事件，例如 .ctrl, .alt, .shift, .meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

滑鼠修飾符

• .left：當點擊滑鼠左鍵時觸發。
• .right：當點擊滑鼠右鍵時觸發。
• .middle：當點擊滑鼠中鍵時觸發。

參考資料：Vue.js 官方文件的許多部份

順便補上跟本篇有關的基礎概述：

[Vue] Vue.js 基礎概述（下）

其實我已經累積了蠻多 Vue 筆記了，但都沒時間整理……最近會比較忙，可能要等到年底才能繼續 po 了 😅