单文件组件

简介

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 经典三者的自然扩展。`

单文件组件 ​

简介 ​

单文件组件

简介