Vue SFC：script、template 与 style
了解单文件组件格式：用于编写逻辑的 script 块、用于视图的 template 块，以及用于作用域 CSS 的 style 块。
Vue SFC：script、template 与 style 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
什么是单文件组件
Vue 单文件组件（SFC）是一个包含三个块的 .vue 文件：<script> 用于 JavaScript 逻辑，<template> 用于 HTML 视图，<style> 用于 CSS。一个组件所需的全部内容都位于同一个文件中。
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>script 块
逻辑、数据、导入内容和组合式 API 代码都写在这里。使用 <script setup> 时，在顶层声明的变量和导入内容会自动在模板中可用。
script setup——现代方式
<script setup> 是推荐使用的 SFC 语法。在其中声明的变量、计算属性和函数可以直接在模板中使用，无需显式返回。
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>template 块
模板包含组件的 HTML 视图。Vue 模板会被编译为渲染函数。请在模板中使用 Vue 专用的属性和指令（条件渲染指令、列表渲染指令、@click）。
模板插值
使用双大括号 {{ }} 将响应式数据作为文本输出。Vue 会自动转义 HTML；如果要渲染 HTML，请谨慎使用 v-html 指令。
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>style 块
style 块中的 CSS 会应用于该组件。添加 scoped 可以将样式限制为仅作用于此组件的元素，从而防止样式意外泄漏到全局。
<style scoped>
.card {
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>作用域样式的工作原理
Vue 会为组件元素添加唯一的数据属性（例如 data-v-abc123），并重写作用域 CSS 选择器，使其包含该属性。这样可以确保样式只匹配此组件中的元素。
Vue 中的 CSS 模块
除了 scoped，还可以使用 <style module> 来实现 CSS 模块。在模板中通过 $style 对象访问类名。
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>全局样式
未使用 scoped 的样式会全局生效。一种常见模式是：使用全局 app.css 存放基础样式和设计令牌，再为每个组件使用作用域样式编写组件专属规则。
SFC 中的 TypeScript
在 script 块中添加 lang="ts" 即可使用 TypeScript。Volar（官方 Vue IDE 扩展）为 Vue SFC 提供完整的 TypeScript 支持，包括经过类型检查的模板。
SFC 文件命名
对于在模板中使用的组件，请使用 PascalCase 命名 SFC 文件（UserProfile.vue）。Vue 建议使用多词名称，以避免与 HTML 元素发生冲突。
快速检查
Vue 的 <style> 块上的 scoped 属性有什么作用？
回顾：Vue 单文件组件
.vue 文件包含三个块：script（逻辑）、template（视图）和 style（CSS）。现代组合式 API 的写法是使用