第一章｜模板与单文件组件

从运行第一个组件开始，学习插值、属性、事件、表单、条件与列表，再认识模板引用、插槽和单文件组件。先看清状态如何显示、输入如何改变状态，再进入组件之间的协作。

阅读前需要什么

需要 HTML 表单元素、CSS 选择器和 JavaScript 的表达式、函数、数组与模块知识。环境搭建属于本章内容，从第 00 篇开始，无须提前准备一个 Vue 项目。

这一章怎样连起来

一次输入先经过事件处理，再改变状态，模板根据状态描述界面。属性与表单处理的是值怎样进入 DOM，条件与列表处理的是节点怎样出现和复用；模板引用、插槽与样式则继续划分组件的外部能力与内部结构。

<template> 描述结构与绑定，<script setup> 定义状态和动作，<style> 表达样式边界。先在这些职责中定位一个变化，再用后续章节理解依赖追踪和渲染实现。

阅读顺序

1. 学习环境
2. 插值与表达式
3. 属性绑定
4. 事件绑定
5. 表单与 v-model
6. 条件渲染
7. 列表渲染与 key
8. 内置指令工具箱
9. 模板引用
10. 插槽初识
11. 单文件组件与样式
12. script setup 与编译宏
13. Vue 2 组件维护（维护回访）
14. Vue 2/3 模板契约（维护回访）

标注“维护回访”的篇目用于比较旧项目行为。首次学习主线可以暂缓，具备对应前置后再读；它们保留在实际编号位置，便于从正文和侧栏定位。

读完后能做什么

选择一个动态列表，分别改变文字、删除一项、切换为空列表，解释每次变化经过哪个绑定。再单独观察输入框的值和焦点：显示内容、DOM 属性和节点身份分别受什么规则控制？遇到问题时回到对应专题的小实验，不必把所有能力组合成同一个应用。

先独立完成各篇练习，再对照本章答案。接着进入第二章｜组件模型与通信。