Vue 應用的核心概念

Vue 應用的核心概念

在使用 Vue 進行開發時，有幾個核心概念需要理解，包括 模板 (Template)、實例 (Instance) 和 組件 (Component)。這些概念構成了 Vue 應用的基礎，讓開發者能夠構建可重用和高效的用戶界面。

1. 模板 (Template)

模板是 Vue 應用的視圖層，定義了應用的 HTML 結構。模板語法是一種增強版的 HTML，它允許我們在 HTML 中嵌入 Vue 指令和表達式，以進行數據綁定、事件處理和條件渲染。

• 數據綁定：使用 {{ }} 插值語法將 JavaScript 表達式的結果插入到模板中，例如：``。
• 指令：Vue 提供了一系列指令來幫助我們更靈活地控制 DOM，例如：
  • v-bind：綁定屬性。
  • v-if、v-else、v-else-if：條件渲染。
  • v-for：列表渲染。
  • v-on：事件綁定。

範例：

<div id="app">
  <h1>{{ message }}</h1>
  <p v-if="isVisible">This paragraph is conditionally rendered.</p>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <button @click="handleClick">Click Me</button>
</div>

在這個範例中，模板使用了插值、條件渲染 (v-if)、列表渲染 (v-for) 和事件綁定 (v-on，縮寫為 @) 等語法。

2. 實例 (Instance)

Vue 實例是 Vue 應用的核心，每個 Vue 應用都是通過創建一個 Vue 實例來實現的。實例提供了應用的狀態（數據）、行為（方法）、生命周期鉤子等核心功能。

• 創建 Vue 實例：你可以使用 Vue.createApp() 來創建一個 Vue 應用的實例。
• 數據 (data)：定義應用的狀態，使用響應式數據，當數據發生變化時，Vue 會自動更新視圖。
• 方法 (methods)：定義應用的行為，通常是用來處理事件。
• 計算屬性 (computed) 和 監聽器 (watchers)：幫助監控和計算應用的數據狀態變化。
• 生命周期鉤子：在 Vue 實例的不同階段（如創建、掛載、更新和銷毀）執行代碼。

範例：

const app = Vue.createApp({
  data() {
    return {
      message: "Hello, Vue!",
      isVisible: true,
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
      ],
    };
  },
  methods: {
    handleClick() {
      alert("Button clicked!");
    },
  },
});

app.mount("#app");

在這個範例中，我們創建了一個 Vue 應用實例，定義了應用的數據 (data) 和方法 (methods)，並將其掛載到 HTML 中的 #app 元素上。

3. 組件 (Component)

組件是 Vue 應用的基礎構建塊，可以看作是可重用的 Vue 實例。組件可以包含模板、數據、邏輯和樣式，允許你在應用中創建複雜的用戶界面時保持代碼的簡潔和可維護性。

• 定義組件：可以通過 Vue 的 component 方法定義全局組件，也可以在 Vue 實例內部定義局部組件。
• 組件的組織：組件可以是嵌套的，即組件內可以包含其他組件。
• 父子組件通信：
  • Props：父組件可以使用 props 向子組件傳遞數據。
  • 事件：子組件可以使用 $emit 向父組件發送事件。

範例：

// 定義一個全局組件
app.component("my-component", {
  props: ["title"],
  template: `<h2>{{ title }}</h2>`,
});

// 創建 Vue 實例
const app = Vue.createApp({
  data() {
    return {
      mainTitle: "Main Component Title",
    };
  },
});

app.mount("#app");

在這個範例中，我們定義了一個全局組件 my-component，它接收一個 title 屬性並顯示它的值。我們在主應用中使用這個組件，並將 mainTitle 作為 title 傳遞給子組件。

總結

• 模板 是定義 Vue 應用的 HTML 結構和行為的地方。
• 實例 是 Vue 應用的核心，負責管理應用的數據、方法和生命周期。
• 組件 是可重用的 Vue 實例，用於構建複雜的用戶界面並保持代碼的模塊化和可維護性。