0%

[Vue] 進階指令與模板語法 (下)

發表於 更新於 分類於 Disqus：

本篇筆記要繼續分享 Vue 中一些指令的進階用法與使用細節，基本上是 Vue 基礎概述篇的延伸，不過也會提到一些新的東西。
我超不會寫前言，就不廢話了，直接開始吧！

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

在一個 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 就放這裡
1
2
3
4
5
6
7
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 為女生。

1
2
// data 裡其中一筆資料如下：
sex: "男生",
1
2
3
<!-- 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
    1
    2
    3
    4
    <!-- Alt + C -->
    <input @keyup.alt.67="clear">
    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>

滑鼠修飾符

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

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

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