Vue 程式札記 : 單文件組件 SFC

Vue 的單文件組件（Single File Components，SFC）是一種特殊的文件格式，讓我們可以將Vue 組件的模板、邏輯和樣式都寫在單一個文件當中。本文將介紹 Vue SFC，幫助開發者理解和使用 Vue SFC。

什麼是 Vue SFC？

Vue SFC 是一種將 HTML、JavaScript 和 CSS 寫在單一個文件中的方式，這種方式使得組件的結構清晰，並且方便維護和重用，一個 SFC 文件包含三個部分：

• <template>：包含 HTML 模板，用於定義組件的結構。
• <script>：包含 JavaScript 代碼，用於定義組件的邏輯。
• <style>：包含 CSS 樣式，用於定義組件的樣式。

接下來讓我們創建一個簡單的 Vue SFC ，以下是一個基本的範例：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue SFC with Composition API!');

    return {
      message
    };
  }
}
</script>

<style>
.hello {
  color: blue;
  font-size: 20px;
}
</style>

在這個範例中，我們創建了一個包含一個標題的組件。標題的內容是通過組件的數據屬性 message 設置的。然後為標題設置了一個基本的 CSS 樣式。

使用 Vue SFC 的好處

Vue SFC 提供了許多優點，使得開發者更加有效率：

1. 模塊化：將組件的模板、邏輯和樣式封裝在一個文件中，使得組件更加模塊化，便於管理和重用。
2. 清晰的結構：每個部分的功能清晰劃分，讓程式碼方便閱讀和維護。
3. 熱更新：在開發過程中，當 .vue 文件被修改時，相應的組件可以自動重新加載。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡