VUE3基礎教學：使用Vue.js響應式框架之template

Vue.js 是一款基於響應式系統的前端框架，在前端產業中廣受歡迎。 Vue.js 3 是 Vue.js 的最新版本，新增了許多特性，例如更快的渲染速度、更好的 TypeScript 支援以及更好的開發體驗。本文將著重介紹 Vue.js 3 的基礎教學之一—模板（template）。

什麼是模板？

在Vue.js 中，範本是一種編寫HTML 程式碼的方式，可以使用它來描述元件的結構和佈局，並使用Vue.js 提供的指令和表達式來宣告元件的行為及數據處理。 Vue.js 的範本語法可以幫助您更輕鬆地建立動態且可重複使用的元件。

下面是一個簡單的模板範例，我們使用名為hello 的元件：

<!-- 模板示例 -->
<template>
  <div>
    <h1 id="Hello-name">Hello {{ name }}!</h1>
    <input v-model="name" type="text">
  </div>
</template>

<!-- 定义一个名为 hello 的组件 -->
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      name: 'Vue',
    };
  },
});
</script>

在上述程式碼中，我們定義了一個名為hello 的元件，並使用範本來定義其結構和佈局。其中，<h1></h1> 標籤中使用了Vue.js 的插值表達式{{ name }}，用於動態地顯示元件中的文本，該表達式會和組件中的資料進行綁定，以確保資料發生改變時，文字也會相應更新。我們還在模板中使用了 v-model 指令來綁定 name 數據，從而實現了一個動態雙向綁定的輸入框。

模板語法

在 Vue.js 的範本中，有許多語法可以幫助我們更好地編寫元件。以下是一些常用的模板語法：

插值表達式

插值表達式可以將元件中的資料渲染到指定的位置。在模板中，我們使用兩個花括號{{ }} 包裹需要綁定的數據，如下所示：

<template>
  <div>
    {{ message }}
  </div>
</template>

在上述例子中，message資料被插入了<div> 元素中。當 <code>message 發生變化時，該顯示區域也會自動更新。

指令

Vue.js 中的指令是一種特殊的屬性，用來為範本添加更多的功能。指令以 v- 前綴開頭，如下所示：

<input v-model="message">

其中，v-model 指令用於實作資料的雙向綁定。指令的工作方式是將指定的資料和元素屬性綁定到一起，從而實現動態更新的效果。

計算屬性

Vue.js 中的計算屬性是一種能夠動態計算資料的屬性。計算屬性的值會根據它所依賴的資料動態計算，只有在它所依賴的資料發生變化時才會重新計算。下面是一個簡單的計算屬性定義：

<template>
  <div>
    {{ reversedMessage }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js 3!',
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
};
</script>

在這個例子中，reversedMessage 計算屬性的值是根據message 資料計算的，只有當 message 改變時，reversedMessage 的值才會重新計算。

條件渲染

有時候我們需要根據條件決定是否要渲染某個元素或元件。在Vue.js 中，可以使用v-if 或v-show 指令來實作條件渲染，如下所示：

<template>
  <div>
    <div v-if="show">Hello Vue.js 3!</div>
    <div v-show="!show">Sorry, no message to show.</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

在上述程式碼中，我們使用v-if 和v-show 指令根據條件來判斷是否顯示指定的元素。

循環渲染

Vue.js 中的循環渲染是一種循環輸出指定區域的功能，可以動態地展示元件中的資料。 Vue.js 支援多種循環渲染的方式，其中最常用的方式是使用v-for 指令，如下所示：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item 1', 'item 2', 'item 3'],
    };
  },
};
</script>

在上述程式碼中，我們使用 v-for 指令將資料循環輸出到頁面中。每次循環中，我們可以使用插值表達式 {{ item }} 來渲染對應的資料項。

總結

Vue.js 的範本是一種簡單而強大的方式，能夠幫助我們建立動態且可重複使用的元件。使用模板語法，我們可以更好地編寫 HTML 程式碼，並將資料和行為與視圖進行解耦，提高程式碼的可讀性和可維護性。在 Vue.js 3 中，模板語法得到了進一步的改進和最佳化，可以更好地滿足開發者的需求。