0、前置条件
1. 预备知识
JavaScript 概述
2. 编辑器设置
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
一、简介
1. 单文件组件 SFC
单文件组件 ( *.vue 文件，缩写：SFC）：将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。
2. API 风格
2.1. 选项式 API (Options API)
核心思想：以“组件实例(this)”的概念为中心，与面向对象语言-基于类的心智模型更为一致。
优点：对初学者更为友好、适用于低复杂度的场景。
用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。
选项所定义的属性都会暴露在函数内部的 this 上，指向当前的组件实例。
2.2.组合式 API (Composition API)
核心思想：直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。需要对Vue 的响应式系统有更深的理解。
优点：形式更自由，便于组织重用。
核心：声明式渲染、响应式状态
使用导入的 API 函数来描述组件逻辑。组合式 API 通常会与
3. 学习路径
（1）互动教程：边动手边学
（2）阅读指南：深入了解所有细节
（3）查看示例：浏览核心功能、常见界面示例
二、快速上手
1. 创建一个项目
采用构建工具：Vue 官方的构建流程是基于 Vite 的，一个现代、轻量、极速的构建工具。
前提条件：Node版本>15
（1）创建项目
Vue官方的项目脚手架工具，安装并执行create-vue，npm init vue@latest
（2）安装依赖并启动开发服务器：
cd
npm install
npm run dev
（3）发布到生产环境
npm run build
2. 模板语法
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。
2.1. 文本插值{{}}
最基本的数据绑定形式：文本插值（双大括号）——将会将数据插值为纯文本，而不是 HTML。
Message: {{ msg }}双大括号标签会被替换为相应组件实例中msg属性的值。
2.2. 原始 HTMLv-html
想插入 HTML，你需要使用 v-html 指令：
2.3. 属性绑定v-bind:属性名
（1）将元素的属性响应式地绑定到状态上，应该使用 v-bind:属性名 指令，简写为:属性名。
（2）动态绑定多个值：包含多个属性的 JavaScript 对象，通过不带参数的 v-bind，将它们绑定到单个元素上。
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
2.4. 使用 JavaScript 表达式
在 Vue 模板内，支持完整的 JavaScript 表达式：双大括号中、 Vue 指令属性(v-xxx)中
每个绑定仅支持单一表达式：判断方法——可以合法地写在 return 后面。
2.5. 指令 v-xxx
指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute。
扩展：内置指令
（1）指令条件
通过 v-if 和 v-for 指令条件性地或循环地渲染内容。v-for="item of list1"
指令的任务：在其表达式的值变化时响应式地更新 DOM。
（2）指令参数
某些指令会需要一个“参数”，在指令名v-xxx后通过一个冒号隔开做标识。
v-bind 指令来响应式地更新一个 HTML attribute： ...
v-on 指令将监听 DOM 事件： ...
（3）动态参数
attributeName 会作为一个 JavaScript 表达式被动态执行，计算得到的值会被用作最终的参数。 ...
函数绑定到动态的事件名称上当 eventName 的值是 "focus" 时，v-on:[eventName] 就等价于 v-on:focus。
（4）修饰符
是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。
.prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：
3. 响应式
3.0. 响应式状态