Vue 3 用實作帶你看過核心概念 - Day 6：數據綁定和模板(Template)

目錄

• 模板語言更新實際網頁 DOM 元素流程
• 文字插值(Text Interpolation)
• Vue 指令介紹
• v-text：更新元素的文本內容，不解析HTML
• v-html：更新元素的內容，會解析HTML
• v-bind:動態綁定一個或多個屬性(attribute)，同時他也可以是組件的 prop
• 總結
• 小試身手

模板語言更新實際網頁 DOM 元素流程

Vue 使用基於 HTML 的模板語法（Template Syntax），將 Vue 實例中的數據綁定到模板中進行顯示。根據綁定的類型不同，數據可以影響元素的內容、屬性或樣式。

接下來，我會逐一介紹不同的綁定類型：

文字插值(Text Interpolation)

運用Mustache語法(雙括號{{ }})表示 Vue 實例中的 message。

Mustache 語法除了能表達 Vue 實例中的變數之外，還有很多其他的用法如下：

基本上掌握一個原則就是Mustache可以放JavaScript 表達式的結果。

👉 Vue3 CDN Options API Mustache 常用方式實作連結

1. 樣板字面值用法

<p>樣板字面值：{{ `訊息內容 => ${message}` }}</p>

2. 呼叫函式調用結果(搭配 Vue 實體中 methods 定義的函數使用 )

<p>呼叫函式調用結果：{{ say(message) }}</p>

3. JavaScript 原生函式調用結果(反轉字串)

<p>呼叫函式調用結果(反轉字串)：{{ message.split("").reverse().join("") }}</p>

4. JavaScript 運算式

<p>JavaScript 運算式：{{ 2 + 2 }}</p>

5. JavaScript 空白合併運算符

<p>JavaScript 空白合併運算符：{{ isExist ?? '不存在'}}</p>

6. JavaScript 三元運算子

<p>JavaScript 三元運算子：{{ isShow ? 'display' : 'hidden'}}</p>

7. 全局 JavaScrip 方法 - Date.now()
   還想知到有哪些可以使用的全局 JavaScript 方法，可以查看Vue 官方定義能使用的全局 JavaScript 方法

<p>JavaScript 當前時間戳：{{ Date.now() }}</p>

⭐ 雖然可以在 Mustache 中放置表達式，但建議將複雜的邏輯處理放在 Vue 組件中處理，以避免讓模板變得複雜和難以維護。

學完上面的 Mustache 語法，你可能會想過是不是可以套用在HTML屬性(img src、div class...等等)上，答案是 ❌ ，這也會跟接下來要介紹的指令(Directives)相關。

Vue 指令介紹

Vue 指令是带有v-前缀的特殊属性，可以在模板中使用來動態綁定和操作 DOM 元素。

以下將透過 Vue 實例來介紹幾個常見的指令：

👉 Vue3 CDN Options API 指令實作連結

v-text：更新元素的文本內容，不解析HTML

• 透過原生 JavaScript textContent 屬性替換指定元素的內容(僅插入純文本，不會解析 HTML)。
• 以下範例中，message 的值將會覆蓋原本的 Hello Vue!。

JavaScript：

  data() {
    return {
      // v-text 解析成純文本內容
      message: "I am Antonio",
    };
  }

Vue 模板內容：

<p v-text="message">Hello Vue!</p>

v-html：更新元素的內容，會解析HTML

• 透過原生 JavaScript innerHTML 屬性替換指定元素的內容(會解析並插入 HTML 標籤)。
• 以下範例中， author 的值將會覆蓋原本的 Hello Vue!，並且內容包含的<em>和<strong>標籤會被解析和渲染為 HTML。

JavaScript：

  data() {
    return {
      // v-html 可以解析 HTML
      author: "<strong><em>John</em></strong>",
    };
  }

Vue 模板內容：

<p v-html="author">Hello Vue!</p>

F12 查看元素標籤組成：

⭐ 任意渲染 HTML 元素容易造成XSS 攻擊，使用上需要特別注意。

v-bind:動態綁定屬性(attribute)或組件 prop

• 主要會著重在屬性綁定為主，後續說明到組件的部分，會在額外補充說明prop。
• v-bind使用頻率非常高，因此有縮寫 :的方式表達v-bind。
• 屬性綁定應響應式屬性，必須搭配v-bind 指令並搭配：HTML attribute。

⭐ 如果v-bind 綁定對象是null或undefind將會移除該屬性。

以下我將會根據v-bind的四種使用情境進行說明：

1. 純字串的屬性綁定，以 class 屬性綁定在 p 標籤上面為例

JavaScript：

  data() {
    return {
      // v-bind 樣式綁定 class 屬性值(字串)
      className: "authorName",
    };
  }

Vue 模板內容：

<p v-bind:class="className">Hello Vue!</p>

Vue 模板內容(使用 v-bind 縮寫)：

<!-- :class 縮寫 等同於 v-bind:class -->
<p :class="className">Hello Vue!</p>

2. 布林值的屬性綁定，以 button disabled 屬性為例

在 CSS Properties 中，某些屬性屬於布林屬性（Boolean Attribute），這類屬性只接受布林值作為控制條件。例如，button 元素中的 disabled 屬性 ，只能通過 true 或 false 來啟用或禁用該按鈕。

JavaScript：

  data() {
    return {
      // v-bind 樣式綁定 disabled 屬性值 (布林值)
      isButtonDisabled: true,
    };
  }

Vue 模板內容：

<button type="button" :disabled="isButtonDisabled">我是按鈕1號(綁定布林值)</button>

⭐ 如果布林值綁定對象是真值(Truthy) 或空字串（""）等，那麼對應的屬性將會存在於元素上。反之，如果綁定對象是 false、null 等其餘的假值(Falsy) ，則該屬性將不會存在於元素上。

3. 動態參數單一值，綁定 HTML 屬性名稱(需小寫的方式，因為瀏覽器會將標籤屬性名稱轉為小寫)，以 button disabled 屬性為例

屬性名稱是在運行時動態決定的，並且需要在運行時直接與瀏覽器的 HTML DOM 元素屬性進行匹配。

JavaScript：

  data() {
    return {
      // v-bind 樣式綁定 disabled 屬性值 (布林值)
      isButtonDisabled: true,
      // v-bind 樣式綁定動態的 HTML attribute 名稱(需小寫的方式，因為瀏覽器會將標籤屬性名稱轉為小寫)
      buttonattribute: 'disabled',
    };
  }

Vue 模板內容：

  <button class="me-2" type="button" :[buttonattribute]="isButtonDisabled">我是按鈕2號(動態綁定 HTML Attribue)</button>

4. 動態參數多個值，物件型態，綁定 HTML 屬性名稱，以 button disabled 及 class 屬性為例

屬性名稱是在編譯階段決定的。當 Vue 實例將屬性綁定到元素時，Vue 會自動將物件中的鍵名與相應的 HTML 屬性名稱進行匹配。

JavaScript：

  data() {
    return {
      // v-bind 動態參數多個值，物件型態
      btnObj: {
        //決定按鈕樣式
        class: 'big',
        //決定按鈕是否啟用
        disabled: false
      }
    };
  }

Vue 模板內容：

<button type="button" v-bind="btnObj">我是按鈕3號(綁定物件)</button>

⭐ Vue 實例中數據定義的物件綁定在 HTML 上時，僅需v-bind等於這個物件。其規則是物件的鍵名對應合法的 HTML 屬性名稱（如 class、disabled 等），而值則應為相應的屬性值。

總結

• 模板：負責將 Vue 實例中的數據變量動態地響應更新到實際的 HTML DOM 元素上，並可以結合 Vue 的內建指令使用。
• 文字插值：可以將 JavaScript 表達式結果或 Vue 實例中的數據綁定並顯示在模板中，需要使用Mustache 語法。
• v-text ＆ v-html：兩者都會覆蓋元素的內容，不同的是 v-text 不會解析 HTML 標籤，而 v-html 會解析並渲染 HTML 標籤。
• v-bind：用於將響應式屬性綁定到模板上。綁定方式可以是單一值，也可以是物件。如果是動態綁定 HTML 屬性，需特別注意屬性名稱必須為小寫才能被正確解析。

小試身手

可以按照今天學到的v-bind試著完成一個密碼輸入器，透過調整不同input 類別，來讓使用者可以看自己輸入的密碼原始模樣。(僅需調整input type的部分即可)

MDN 參考 input type text 及 input type password type 差異

👉 Vue3 CDN Options API 密碼輸入器練習模板連結

👉 Vue3 CDN Options API 密碼輸入器完成實作連結