Vue template 模板語法

第 12 屆 iThome 鐵人賽

DAY 6

自我挑戰組

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

12th鐵人賽 vue vuejs 菜鳥前端 ruru

RURU Tseng

2020-09-21 23:38:00

2963 瀏覽

分享至

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。

補充 ❖：
expression 與 statement 差異介紹：Expressions versus statements in JavaScript

Directives

與 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	只渲染元素和組件一次。隨後的重新渲染，元素/組件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新性能。	範例