單檔案元件

簡介

Vue 單檔案元件（簡稱 *.vue 檔案，縮寫為 SFC）是一種特殊的檔案格式，允許我們將 Vue 元件的模板、邏輯和樣式封裝在一個檔案中。以下是一個示例 SFC：

vue

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

vue

<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

正如我們所見，Vue SFC 是 HTML、CSS 和 JavaScript 經典三者的自然擴充套件。`

單檔案元件 ​

簡介 ​

單檔案元件

簡介