Vuejs
還記得前一章節 option
裡的 template
嗎?Vue 提供開發者透過 template
聲明式的將 DOM 與 Vue instance 的data
綁定,底層則是透過 Virtual DOM 渲染函數實現。
進入介紹前,先來看簡單的範例。透過 {{ Mustache }}
及 Directives
模板語法,以下表格中的資訊被替換成 Vue instance 的 data
。
<main>
<table>
<caption>{{ caption }}</caption>
<thead>
<tr>
<th colspan="6">{{ title }}</th>
</tr>
</thead>
<tbody>
<tr>
<td v-for="item of items">{{ item }}</td>
</tr>
</tbody>
</table>
</main>
const vm = new Vue({
el: "table", // 該 Option 沒有 template,會以 el 作為 template
data: {
caption: "RED",
title: "紅色的水果",
items: ["蘋果", "水蜜桃", "火龍果", "草莓"]
}
});
模板使用的方法分為 {{ Mustache }}
、指令(Directives):
{{ Mustache }}
使用在文本內容,渲染時 {{ Mustache }}
會依據所填入的 expression
被計算、替換成 data
中的 property
,最終轉換為文字內容。由於 Vue 對於 data
綁定提供完整的 expression
支援,所以也可以在 {{ Mustache }}
裡頭寫入 expression
。
<caption>{{ expression }}</caption>
<caption>{{ text }}</caption>
<caption>{{ text + '你好啊' }}</caption>
由於只支援單句 expression
,如下的 statement
並不會生效:
// Noooooooo
{{ if (false) { return 'No' } }}
補充 ❖:
Mustache 一詞來源於 Chris Wanstrath 創建的 Mustache,是一個無邏輯(if、else)的模板系統,常被用於 HTML。
補充 ❖:
expression
與statement
差異介紹:Expressions versus statements in JavaScript
與 Mustache 不能作用於 HTML attribute 不同,Vue 提供 v-
開頭的特殊屬性(稱之為 Directives 指令)寫於 HTML attribute 位置,另我們能動態綁定 HTML attribute,除此之外也提供各種作用於 DOM 的特殊指令,如可以更新元素 innerHTML
的 v-html
以及綁定事件的 v-on
讓我們能更加靈活的綁定渲染模板。
以下為 Vue 所有指令:
指令名稱 | 介紹 | 應用 |
---|---|---|
v-text | 更新元素的 textContent 。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。 |
範例 |
v-html | 更新元素的 innerHTML 。注意:內容按普通 HTML 插入 - 不會作為 Vue 樣板進行編譯。 |
範例 |
v-show | 根據表達式之真假值,切換元素的 display CSS property。 |
範例 |
v-if | 根據表達式的值的 truthiness 來有條件地渲染元素。 | 範例 |
v-else | 為 v-if 或者 v-else-if 添加“else 區塊”。 |
範例 |
v-else-if | 表示 v-if 的“else if 區塊”。可以鏈式呼叫。 |
範例 |
v-for | 基於源資料多次渲染元素或樣板區塊。此指令之值,必須使用特定語法 alias in expression ,為當前遍歷的元素提供別名 |
範例 |
v-on | 綁定事件監聽器。事件類型由參數指定。 | 範例 |
v-bind | 動態地綁定一個或多個attribute,或一個組件prop 到表達式。 | 範例 |
v-model | 在表單控件或者組件上創建雙向綁定。 | 範例 |
v-slot | 提供具名插槽或需要接收 prop 的插槽。 | 範例 |
v-pre | 跳過這個元素和它的子元素的編譯過程。可以用來顯示原始Mustache 標籤。跳過大量沒有指令的節點會加快編譯。 | 範例 |
v-cloak | 這個指令保持在元素上直到關聯實例結束編譯。 | 思考合適範例中... |
v-once | 只渲染元素和組件一次。隨後的重新渲染,元素/組件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新性能。 | 範例 |
以上為此次內容,介紹了模板的使用方式且列出了簡易的使用範例,指令的深入介紹將會配合官網文件在之後陸續深入介紹應用時要注意的細節,感謝看到這裡的你,我們明天見。
明天來補充本篇下半部還沒完成的部分 ... orz
sandboxed
若是文中有任何錯誤、錯字、想討論的內容,歡迎各位大大不吝鞭笞指正、交流分享,筆者不慎感激 ✦ ✦ ✦
▶︎ 筆者 github:https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人:每天來點 CSS Specification
▶︎ 倘若不斷向深處扎根,似乎就能茁壯成長 - RM