Vue.js 起步：从零开始构建第一个响应式页面
如果你正在学习前端开发，或者已经接触过 HTML、CSS 和 JavaScript，那么 Vue.js 一定是你绕不开的一个名字。它不像 React 那样复杂，也不像 Angular 那样“全家桶”式厚重，Vue 3.0 的设计哲学是“渐进式”，这意味着你可以从一个小功能开始，逐步构建出完整的应用。
今天我们就来一起完成一次真正的 Vue.js 起步之旅。不需要你有复杂的项目经验，只要你会写 HTML 和基本的 JavaScript，就能跟上这一步。
为什么选择 Vue.js？它到底好在哪？
在动手之前，先回答一个核心问题：为什么推荐 Vue.js？这不只是因为社区活跃，而是因为它真正做到了“易上手 + 可扩展”。
想象一下，你在搭建一个小型电商页面，需要显示商品列表、实时更新库存、点击按钮后弹出购物车。用原生 JavaScript 写这些逻辑，代码会迅速变得冗长且难以维护。而 Vue.js 的核心思想是“数据驱动视图”，你只需要关心数据的变化，页面自动更新。
比如你定义一个变量 count = 0，然后在页面上显示它，当你在代码中把这个值改成 1，页面上的数字就会立刻变成 1。这种“自动同步”的机制，就是 Vue 的魅力所在。
Vue 3.0 引入了 Composition API，让逻辑复用更清晰，也更适合大型项目。但别担心，我们今天从最基础的选项式 API 开始，循序渐进。
环境搭建：用 CDN 快速启动 Vue.js
我们不推荐初学者立刻配置 Webpack 或 Vite，那样容易陷入工具链的陷阱。最简单的方式是直接通过 CDN 引入 Vue.js。
打开任意文本编辑器（比如 VS Code），新建一个文件，命名为 index.html，内容如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vue.js 起步</title>
<!-- 引入 Vue 3.0 的 CDN 文件 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 这里是我们的应用挂载点 -->
<div id="app">
<!-- 使用 Vue 的插值语法显示数据 -->
<h1>{{ message }}</h1>
<button @click="increment">点击加 1</button>
<p>当前计数：{{ count }}</p>
</div>
<!-- Vue 实例的脚本部分 -->
<script>
// 定义 Vue 应用实例
const { createApp } = Vue;
createApp({
// 数据层：定义响应式数据
data() {
return {
message: '欢迎来到 Vue.js 起步之旅！',
count: 0
};
},
// 方法层：定义可被调用的函数
methods: {
// 点击按钮时执行此函数
increment() {
// 直接修改 count，Vue 会自动更新页面
this.count += 1;
}
}
}).mount('#app'); // 挂载到 id 为 app 的 DOM 元素上
</script>
</body>
</html>
代码逐行解析（重点理解！）
<!DOCTYPE html>：标准 HTML5 声明。<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：引入 Vue 3.0 的全局版本，无需构建工具即可使用。<div id="app">：这是 Vue 应用的“入口”，Vue 会在这个容器中渲染内容。{{ message }}：这是 Vue 的“插值表达式”，用于在 HTML 中插入数据。@click="increment"：这是事件绑定，相当于v-on:click，点击按钮时触发increment方法。createApp({})：创建 Vue 应用实例，是 Vue 3 的标准入口。.mount('#app')：将应用挂载到页面上，告诉 Vue 从哪里开始渲染。
⚠️ 注意：
this在 Vue 中指向当前组件实例，你可以通过this.count访问数据，this.increment()调用方法。
响应式原理：数据如何驱动视图？
Vue.js 最核心的能力是“响应式”。你可能会问：为什么我改了 count，页面就自动变了？这背后有强大的机制。
Vue 会将 data() 中返回的对象进行“响应式处理”。也就是说，它会监听每个属性的变化。一旦某个属性被修改，Vue 就会触发更新，重新渲染相关 DOM。
我们可以做个实验：在浏览器中打开这个 HTML 文件，点击按钮，观察页面变化。你会发现，count 的值立刻更新，而无需手动调用 document.getElementById 或 innerHTML。
这就像你家的温度计：当你打开空调，温度下降，温度计指针会自动移动。Vue 就是那个“自动更新”的指针。
模板语法进阶：条件渲染与列表循环
Vue 的模板语法非常直观，除了插值，还有条件和循环指令。
条件渲染：v-if 和 v-show
假设你想在用户登录后才显示“欢迎回来”，可以这样写：
<!-- 根据 isLogin 的真假决定是否显示 -->
<div v-if="isLogin">
<p>欢迎回来，张三！</p>
</div>
<!-- 即使为 false 也保持在 DOM 中，只是隐藏 -->
<div v-show="isLogin">
<p>欢迎回来，张三！</p>
</div>
v-if：条件为假时，元素完全不渲染，节省性能。v-show：只是添加display: none样式，适合频繁切换的场景。
列表渲染：v-for 循环
假设我们要展示一个用户列表：
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} - {{ user.age }} 岁
</li>
</ul>
对应的 data 中定义：
data() {
return {
users: [
{ id: 1, name: '小李', age: 25 },
{ id: 2, name: '小王', age: 30 },
{ id: 3, name: '小张', age: 28 }
]
};
}
v-for="user in users"：遍历数组users，每次取出一个元素赋值给user。:key="user.id"：key是 Vue 优化渲染的关键，必须唯一，建议用数据的唯一标识符。
📌 小贴士：
v-for不能用于对象，但可以用v-for="(value, key) in object"来遍历对象的键值对。
事件处理：从点击到表单输入
Vue 的事件绑定非常灵活。除了 @click，还有 @input、@change、@submit 等。
表单双向绑定：v-model
这是 Vue 最强大的功能之一。它让表单输入和数据自动同步。
<input v-model="username" placeholder="请输入用户名" />
<p>你输入的是：{{ username }}</p>
当你在输入框中打字，username 会实时更新，页面也同步显示。
✅
v-model是:value和@input的语法糖，等价于：<input :value="username" @input="username = $event.target.value" />
表单提交事件
<form @submit.prevent="handleSubmit">
<input v-model="email" placeholder="请输入邮箱" />
<button type="submit">提交</button>
</form>
@submit.prevent：阻止表单默认提交行为，防止页面刷新。handleSubmit是你定义的方法，可以在这里进行验证或发送请求。
组件化思想：从单文件到模块化开发
Vue 的组件化是它强大的原因之一。我们可以把页面拆成多个可复用的部分。
比如创建一个“计数器”组件：
<!-- 定义组件 -->
<script>
const Counter = {
template: `
<div class="counter">
<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>
</div>
`,
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
};
</script>
然后在主应用中注册并使用：
createApp({
components: {
Counter // 注册组件
},
template: `
<div>
<h2>主页面</h2>
<Counter />
<Counter />
</div>
`
}).mount('#app');
这样你就可以在页面中复用同一个计数器组件两次，互不影响。
总结：Vue.js 起步的关键点
Vue.js 起步并不难，关键是理解“数据驱动视图”这个核心思想。你不需要一开始就掌握所有高级特性，从一个简单的计数器开始，逐步添加功能。
- 使用 CDN 快速引入 Vue，避免配置烦恼。
- 掌握
data、methods、v-if、v-for、v-model等基础语法。 - 理解响应式机制：数据变化 → 视图自动更新。
- 逐步引入组件化，提升代码复用性。
当你能独立写出一个带登录、列表、计数器的完整页面时，你就真正迈入了 Vue.js 的世界。
Vue.js 起步不是终点，而是你构建现代化前端应用的起点。保持动手，多写、多试、多改，你会越来越熟练。
下一次，我们可以深入学习 Vue 3 的 Composition API，或者探讨如何用 Vite 搭建项目，开启更高级的开发模式。但今天的这一步，已经足够重要。