0%

Vue 指令介紹

發表於 2023-01-04 更新於 2023-01-08 分類於前端

Vue 指令介紹

基礎介紹

名稱	範例	說明
指令 Directives	v-model	Vue 專門使用於 HTML 上的方法
修飾符 Modifiers	v-model.number	讓指令更好運作
縮寫 Shorthands	v-on:click=”” => @:click=””	讓程式碼更簡潔

綁定內容於畫面上

單筆資料渲染

名稱	說明	程式碼
v-text	純文字渲染	`<p><span v-text="name"></span> 在學程式</p>`
`{{}}`(Mustache)(常用)	純文字渲染或任何表達式內容	`<p>{{name}} 在學程式</p>`
v-html (少用)	渲染包含 HTML 標籤字串，但使用上要特別注意：請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。（XSS 攻擊），詳細說明可參考：https://cn.vuejs.org/v2/api/#v-html	`<div v-html="rawHtml"></div>`
v-once	單次綁定，第一次渲染之後即使資料有更動也不會再次渲染	`<p v-once>{{name}}在學程式</p>`
v-pre	不會被轉譯	`<p v-pre>{{name}}在學程式</p>`

進階技巧：表達式

運用表達式會回傳值的特性。

技巧	程式碼	畫面顯示
樣板字面值	{{`${name}在跳舞`}}	Winnie 在跳舞
反轉字串	`{{text.split("").reverse().join("")}}`	式程學在 einniW
綁定 methods	`{{say("Ming")}}`	Ming 在學程式
JS 運算	`{{1+1}}`	2

多筆資料渲染 v-for

名稱	程式碼	說明
v-for	`<li v-for="(item,key) in data中定義名稱"></li>`	陣列/物件迴圈，item 表陣列/物件中的單筆物件，key 表陣列中的索引值/物件屬性名稱
	`<li v-for="自訂名稱 in 5"></li>`	純數值迴圈

v-for 會跟一個 key 來進行綁定，有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤。例如：當 Vue 認為某一區塊沒有進行變動就不會做渲染更新。
當節點不同無法使用同一個 v-for 時，可使用 <template> 將兩個節點包覆。

條件判斷 v-if、v-else、v-else-if

名稱	程式碼	說明
v-if	`<p v-if="isFull">小明飽了</p>`	判斷 HTML 的節點是否呈現，當回傳值為真值會呈現，反之則不呈現或對接至 v-else 、 v-else-if
v-else	`<p v-else="isFull">小明還沒吃飽</p>`	當 v-if 值為 false 會對接到 v-else
v-else-if	`<div v-if="link==='小明'">小明吃早餐</div><div v-else-if="link==='小美'">小美去百貨公司</div>`	當 v-if 值為 false 會對接到 v-else-if

避免 v-for 與 v-if 使用於同一標籤上，可使用 HTML 標籤 <template></template> 解決此問題。
v-if 與 v-show 差別：在 HTML 中 v-if 判斷是直接移除 DOM 元素，使其從 HTML 結構上消失，使用此方法切換 Vue 元件時，元件的生命週期會重新計算，而 v-show 則是使用 display:none 隱藏顯示。
v-if、v-show 怎麼選擇？

當元件生命週期需要在顯示時重新計算，則可以使用 v-if，如果則否可用 v-show。
當元件隱藏時，同時需要完整移除 DOM 結構，也可使用 v-if

HTML 綁定 v-bind

屬性綁定

名稱	程式碼	縮寫	說明
v-bind	`v-bind:HTML屬性=" "`	:HTML屬性=” “	綁定 HTML 屬性，將資料傳遞到元素上。

動態綁定屬性－:[]

樣式綁定

class 樣式綁定

名稱	程式碼
物件寫法	`v-bind:class = "{ className:真/假值 ,...}"`
陣列寫法	`v-bind:class = "[ className ,...]"`

若 className 中間有「-」，可使用’’將其包覆。
可以透過 :class 的物件綁定並動態切換 Class，物件的屬性為 className，後方的值是表達式結果，如果為真值則會套用該 className。

style 行內樣式綁定

名稱	程式碼
物件寫法	`v-bind:style="{ style 屬性:'style 相對應的值',...}"`
陣列寫法	`v-bind:style="[{ style 屬性:'style 相對應的值',...},{...},...]"`

資料雙向綁定 v-model

名稱	說明
v-model	用於資料與元件產生雙向綁定，常套用於`<input>`、`<textarea>`、`<checkbox>`、`<radio>`、`<select>`表單結構。

注意：v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。需透過 JavaScript 在元件的 data 選項中宣告初始值。

<checkbox> 通常使用於複選
- 單選 true/false：需顯示值時可運用「三元運算子」或是在 <input> 標籤內寫入 「true-value=”值”」、「false-value=”值”」。
- 複選：使用陣列[]定義 data 資料，運作方式即為將選擇的選項加入陣列中。
<radio> 單選
- 定義 data 資料時定義為單一個值。
<select>
- 單選：運作方式會將 value 中的值帶入 data 資料中。
- 複選：使用陣列[]定義 data 資料，並在 <select> 標籤內加上 multiple 表多選，選擇時須按住 ctrl 才可多選。

v-model 修飾符

v-model.修飾符=” “

名稱	說明
lazy	避免持續性觸發，可以在編輯完後才觸發資料更新（使用 change 的形式進行同步）
number	限制只有數值型別的資料才能寫入，且資料會是以 number 型別傳入，無法透過該 input 套用其它資料型別。
trim	修飾掉首尾的空白

事件觸發 v-on

名稱	程式碼	縮寫	說明
v-on	`v-on:DOM事件=" "`	`@DOM事件=""`	觸發 methods 方法。常用 DOM 事件 click、change、submit。

將 submit 事件綁訂於 <form> 上讓這個表單符合此事件才觸發，但綁在 <button> 上只有按下按鈕才會觸發。
動態事件：v-on:[事件]=” “
動態物件方法，在一個物件上需加入多個事件，但此方法無法傳入參數。v-on="{DOM事件:method方法 ,...}"

v-on 修飾符

v-on: DOM 事件.修飾符=” “

範例 Codepen
補充 Codepen

按鍵修飾符（鍵盤事件）

名稱	說明
別名修飾	常使用到的按鍵。ex.enter、tab、delete
相應按鍵	按下組合按鍵。ex.shift+enter
特定鍵	按下特定按鍵。ex.h

滑鼠修飾符（滑鼠事件）

名稱	說明
left	左鍵
middle	中鍵
right	右鍵

事件修飾符

名稱	說明
prevent	調用 event.preventDefault()，移除原生 HTML 事件。
stop	防止向外尋找，調用 event.stopPropagation。（調整冒泡事件）
capture	冒泡事件原本觸發為由內而外，capture 模式改由外而內，添加事件偵聽器時使用 capture 模式。（調整冒泡事件）
self	只觸發自己範圍內的元素。（調整冒泡事件）
once	無論事件產生多少次，只觸發一次回調。

學習來源：六角學院–Vue 3 實戰影音課程