iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
0
自我挑戰組

每天來點 Vue.js 吧系列 第 6

Vue template 模板語法

tags: Vuejs

Vue template ✐

還記得前一章節 option 裡的 template 嗎?Vue 提供開發者透過 template 聲明式的將 DOM 與 Vue instance 的data 綁定,底層則是透過 Virtual DOM 渲染函數實現。

聲明式綁定的簡單範例

進入介紹前,先來看簡單的範例。透過 {{ Mustache }}Directives 模板語法,以下表格中的資訊被替換成 Vue instance 的 data

HTML

<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>

Javascript

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。

補充 ❖:
expressionstatement 差異介紹:Expressions versus statements in JavaScript

Directives

與 Mustache 不能作用於 HTML attribute 不同,Vue 提供 v- 開頭的特殊屬性(稱之為 Directives 指令)寫於 HTML attribute 位置,另我們能動態綁定 HTML attribute,除此之外也提供各種作用於 DOM 的特殊指令,如可以更新元素 innerHTMLv-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

  • Vue 指令
    • Arguments
    • Dynamic Arguments
    • Modifiers
  • 使用注意細節:sandboxed

若是文中有任何錯誤、錯字、想討論的內容,歡迎各位大大不吝鞭笞指正、交流分享,筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github:https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人:每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根,似乎就能茁壯成長 - RM


參考資料:

  1. Vuejs.org 2.x

上一篇
Vue instance 生命週期 ✦
下一篇
Vue computed property `getter` 與 `setter` 的那些事
系列文
每天來點 Vue.js 吧30

尚未有邦友留言

立即登入留言