0%

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

本篇筆記要繼續分享 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-showfalse 的 HTML 元素其實還是有被渲染出來,只是 display: none 而已;v-if 是指渲染出符合條件的 HTML 元素,不符合的就不會渲染。

模板 <template>

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

compued 與 watch

computedwatch 都是專門放函式的 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-valuefalse-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 官方文件的許多部份

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