Vue 入门教程
从零开始学Vue：什么是Vue、能做什么、为什么学、写第一个Vue程序 · 难度：入门 · +10XP
Vue 是什么？
Vue（读音同英语 view）是一个 JavaScript 框架，专门用来构建网页界面。
换个容易理解的说法：以前做网页，你得手动写代码去改页面上的每一个元素——改文字、改图片、改颜色，一行一行地写。用了 Vue，你只需要改数据，页面自己会跟着变。
打个比方：就像 Excel 表格——你在表格里改了数字，图表自动就更新了。Vue 做的就是这个：数据变了，页面自动变。
Vue 能做什么？
Vue 很灵活，你可以在很多场景下使用它：
| 场景 | 说明 | 例子 | ||
|---|---|---|---|---|
| 给网页加交互 | 在现有的 HTML 页面里加一点动态功能 | 购物车数量、点赞按钮、搜索提示 | ||
| 做整个网站 | 用 Vue 构建完整的单页面应用（SPA），页面切换不刷新 | 后台管理系统、社交网站 | ||
| 做手机 App | 配合其他工具，用 Vue 的语法写手机应用 | 跨平台 App |
为什么学 Vue？
| 理由 | 详情 | ||
|---|---|---|---|
| 中文资料好 | Vue 的作者尤雨溪是中国人，官方文档有高质量的中文版，对新手非常友好 | ||
| 国内最流行 | 在国内前端圈，Vue 和 React 是两大主流框架。字节、美团、滴滴、小米、B站都用 Vue | ||
| 好学 | 不需要先学一大堆复杂的概念。你可以今天学一点，马上就能用 | ||
| 找工作加分 | 前端招聘中，Vue 是高频考点，学了就是竞争力 |
准备工作
好消息：你不需要安装任何软件。所有示例都可以直接在浏览器里运行。
本教程的每个代码示例，你都可以在右边的编辑器里直接修改并运行，立刻看到效果。
如果你想在本机写 Vue 代码，只需要：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 引入 Vue就这么简单。不需要 Node.js，不需要 npm，不需要命令行。
你的第一个 Vue 程序
把下面的代码复制到右边编辑器中，点击运行：
<!DOCTYPE html>
<html>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="count = count + 1">
点击次数：{{ count }}
</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
message: "你好，欢迎来到 Vue 的世界！",
count: 0
}
}
}).mount("#app")
</script>
</body>
</html>
运行后你会看到：一个标题 + 一个按钮。点击按钮，数字自动增加。页面不刷新、不闪烁，但数字一直在变。
代码逐行解释
| 代码 | 它做了什么 | ||
|---|---|---|---|
<div id="app"> | 告诉 Vue："这一块区域归你管"。Vue 只会控制这个 div 里面的东西，外面的内容不受影响 | ||
{{ message }} | 两个花括号叫插值表达式。它会把数据 message 的值显示在这里。如果 message 变了，这里自动变 | ||
@click="count = count + 1" | @click 是事件绑定。意思是：点击这个按钮时，把 count 的值加 1 | ||
{{ count }} | 显示 count 的当前值。点击按钮 count 变这里自动更新 | ||
Vue.createApp({...}) | 创建一个 Vue 应用。大括号里写的是这个应用的配置 | ||
data() { return {...} } | 定义数据。这里定义了两个数据：message（一段文字）和 count（一个数字） | ||
.mount("#app") | 把这个 Vue 应用挂载到 id="app" 的元素上。注意 #app 前面的 号，表示"找 id 叫 app 的元素" |
注意：你的代码里没有任何一行是操作网页元素的。Vue 全帮你做了。
Vue 的核心思想：数据驱动
| 对比 | 传统方式 | Vue 方式 | ||
|---|---|---|---|---|
| 改数据 | 改变量 | 改 data 里的值 | ||
| 更新页面 | 手动操作 DOM | 自动 | ||
| 代码量 | 多 | 少 | ||
| 出错概率 | 高（忘记更新页面） | 低（Vue 帮你记着） |
动手练习
光看不练学不会。在右边编辑器里，试着做下面的事：
1. 改欢迎语：把 message 的值从 "你好，欢迎来到 Vue 的世界！" 改成你自己想说的话。点运行，看到变化了吗？
2. 加一个新数据：在 data() 里加一个 name: "小明"，然后在页面上用 {{ name }} 显示出来
3. 点击按钮 10 次：连续点击按钮 10 次。注意页面没有闪烁，没有刷新——但数字一直在变
4. 打开浏览器控制台：按 F12 打开开发者工具，在 Console 里看看有没有报错（应该没有）
当你完成这些练习，你就体验了 Vue 最核心的东西：数据变了，页面自动变。
接下来学什么？
你已经写下了第一行 Vue 代码。接下来，我们一个一个概念地学：
| 章节 | 你要学的东西 | ||
|---|---|---|---|
| Vue 指令 | v-bind、v-if、v-for、v-model——用它们让页面更灵活 | ||
| 事件处理 | 点击、输入、提交——响应用户的各种操作 | ||
| 表单绑定 | 让输入框和数据实时同步 | ||
| 组件 | 把页面拆成独立的小块，像搭积木一样拼起来 |