Vue3 教程
介绍
Vue 是什么
Vue（发音为 /vjuː/，类似 view）是一款用于构建用户界面的渐进式 JavaScript 框架。
所谓渐进式，是指你可以按需使用它的功能，而不是一开始就必须接受整套体系。比如，你只用一个 <script> 标签就能给现有网页加上一点交互，等业务变复杂了，再逐步引入组件化、路由、状态管理、构建工具等模块，Vue 不强求你全盘采用，而是随着项目需要一层层叠加能力。
Vue 基于标准 HTML、CSS 和 JavaScript 构建，并约定了一种用标签描述页面结构、把代码分成一个个小组件、界面随数据自动更新的编程方式，帮你高效地开发用户界面。
产生背景
在 Vue 出现之前，前端开发大多依靠 jQuery 直接操作 DOM，那时页面上数据一变，开发者就得手动去改对应的视图，交互稍微多一点，代码就会变得又乱又难维护。
后来数据驱动、MVVM 的思想逐渐流行，大家希望做到「数据变了，视图自动跟着变」，而不再手工同步。
2014 年，尤雨溪（Evan You，前 Google 工程师）发布了 Vue，它吸收了 Angular 的响应式数据绑定与 React 的组件化思想，又做成了轻量、好上手、可以渐进采用的框架。
发展历程
- 2014 年，Vue 1.0 发布，定位为视图层库，引入了响应式这一核心概念。
- 2016 年，Vue 2.0 发布，基于
Object.defineProperty实现响应式系统，真正流行起来，配套的 Vue Router、Vuex 等生态也逐步壮大。 - 2020 年，Vue 3.0 发布，用
Proxy重写了响应式系统，并推出 Composition API，性能更好，对 TypeScript 也更友好。
如今 Vue 3 是官方主推的版本，本教程也基于 Vue 3 讲解。
核心特点
- 响应式，数据变化后视图会自动更新，不用手动操作 DOM。
- 组件化，把界面拆成一个个可复用的小组件，便于维护和协作。
- 渐进式，可以按需采用，从单个脚本到完整工程都能胜任。
- 生态完善，常用的 Vue Router（路由）、Pinia（状态管理）、Vite（构建工具）都能开箱配合。
前置准备
- HTML：常用标签、属性、块级元素与行内元素、常见表单控件（
input、button等），因为 Vue 模板就是基于 HTML 语法写的。 - CSS（CSS 入门）：基础选择器（类名、标签名）、盒模型，本教程会频繁使用
class与内联style的绑定。 - JavaScript 基础（JavaScript 教程）：变量、函数、数组、对象、基本的 DOM 操作，这是 Vue 脚本区编写逻辑的根基。
- ES6 语法（ES6 教程）：箭头函数、解构赋值、模块化
import/export，Vue3 官方示例与现代项目代码里大量使用它们，看不懂会寸步难行。 - npm（NPM 教程）：Node.js 与 npm 能让你运行 Vue 项目，建议至少会用
npm install安装依赖、npm run dev启动开发服务器。
参考资料
本教程在编写过程中参考了下列资料：