零基础也能学会的 Vue.js 入门实战指南

大家好，我是某 211 高校计算机专业的研二学生，平时喜欢写技术博客帮助刚入门前端的同学。最近收到不少私信，问“Vue 和 React 到底选哪个？”、“学前端对求职有帮助吗？”、“能不能用前端技术做爬虫？”——今天我就用这篇手把手教程，带完全零基础的朋友走进 Vue.js 的世界，并一一解答这些疑问。

我当初学的时候，也是从“HTML 是什么”开始的。别担心，只要跟着做，你也能写出自己的第一个 Vue 应用！

---

为什么选择 Vue.js？

Vue.js 是一个用于构建用户界面的 渐进式 JavaScript 框架。简单说，它能让你用更少的代码、更清晰的结构，快速开发网页应用（比如后台管理系统、电商页面、社交平台等）。

对比 React：

• React 更灵活但学习曲线陡峭，适合大型项目；
• Vue 语法更直观，文档友好，特别适合新手入门。

📌 求职提示：国内大厂（如阿里、腾讯、字节）大量使用 Vue，尤其在中后台系统开发中。掌握 Vue 是前端岗位的硬性要求之一。

至于“爬虫”？前端本身不能直接做爬虫（那是 Python/Node.js 的事），但你可以用 Vue 写一个展示爬虫数据的可视化页面——这也是很多公司需要的技能组合。

---

第一步：搭建开发环境

别被“环境配置”吓到，现在工具非常成熟，只需三步：

1. 安装 Node.js

访问 https://nodejs.org，下载 LTS 版本（长期支持版），一路默认安装即可。

验证是否成功：

node -v  # 显示版本号，如 v18.17.0
npm -v   # 显示 npm 版本

2. 安装 Vue CLI（命令行工具）

在终端运行：

npm install -g @vue/cli

3. 创建你的第一个 Vue 项目

vue create my-first-vue-app

过程中选择 “Default (Vue 3)”（推荐新手用 Vue 3）。

进入项目并启动：

cd my-first-vue-app
npm run serve

浏览器打开 http://localhost:8080，看到欢迎页面就成功了！

---

核心概念：用最简单的话讲清楚

Vue 的核心思想是 “数据驱动视图” ——你改数据，页面自动更新，不用手动操作 DOM。

1. 响应式数据（Reactivity）

在 src/App.vue 中，你会看到这样的代码：

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div>{{ count }}</div>
  <button @click="count++">+1</button>
</template>

• ref(0) 创建一个响应式变量；
• {{ count }} 在模板中显示它的值；
• 点击按钮，count 变化，页面自动刷新。

💡 我当初学的时候总想手动改 HTML，后来才明白：只管数据，别管页面怎么变。

2. 指令（Directives）

Vue 提供特殊属性来控制 DOM 行为：

指令	作用	示例
v-if	条件渲染	<div v-if="show">Hello</div>
v-for	循环列表	<li v-for="item in list" :key="item.id">{{ item.name }}</li>
@click	绑定点击事件	<button @click="handleClick">点我</button>

3. 组件化（Component）

把页面拆成小积木，每个 .vue 文件就是一个组件。

例如创建 Counter.vue：

<template>
  <div>当前计数：{{ num }}</div>
  <button @click="num++">加一</button>
</template>

<script setup>
import { ref } from 'vue'
const num = ref(0)
</script>

在 App.vue 中使用：

<template>
  <Counter />
</template>

<script setup>
import Counter from './components/Counter.vue'
</script>

---

实战：做一个“待办事项”小应用

现在我们动手做一个 Todo List，涵盖 Vue 最常用的功能。

步骤 1：定义数据结构

const todos = ref([
  { id: 1, text: '学习 Vue', done: false },
  { id: 2, text: '写博客', done: true }
])
const newTodo = ref('')

步骤 2：添加新任务

<input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入任务..." />
<button @click="addTodo">添加</button>

<script setup>
function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      done: false
    })
    newTodo.value = ''
  }
}
</script>

🔍 v-model 实现双向绑定：输入框内容 ↔ newTodo 变量自动同步。

步骤 3：渲染列表 + 切换完成状态

<ul>
  <li v-for="todo in todos" :key="todo.id">
    <span :class="{ done: todo.done }">{{ todo.text }}</span>
    <button @click="toggle(todo)">✓</button>
  </li>
</ul>

<style scoped>
.done { text-decoration: line-through; color: #999; }
</style>

<script setup>
function toggle(todo) {
  todo.done = !todo.done
}
</script>

步骤 4：删除任务

<button @click="remove(todo)">🗑️</button>

<script setup>
function remove(todo) {
  const index = todos.value.indexOf(todo)
  if (index > -1) {
    todos.value.splice(index, 1)
  }
}
</script>

完整代码不到 50 行，但你已经掌握了 Vue 的核心能力！

---

新手常见问题 & 避坑指南

❓ 为什么页面没更新？

• 检查是否用了 ref 或 reactive；
• 直接修改数组索引（如 arr[0] = newValue）不会触发更新，要用 arr.splice() 或 Vue.set（Vue 2）。

❓ v-for 为什么要加 :key？

• key 帮助 Vue 识别每个元素的身份，提升渲染性能；
• 最好用唯一 ID，不要用 index（除非列表只增不删）。

❓ Vue 和 React 怎么选？

维度	Vue	React
学习难度	⭐⭐	⭐⭐⭐⭐
国内岗位	多（尤其中小厂）	多（大厂偏多）
生态	完善，官方工具链	极其丰富，社区驱动
推荐路径	零基础首选	有 JS 基础再学

✅ 建议：先掌握 Vue 打牢基础，再学 React 会快很多。

❓ 能用 Vue 做爬虫吗？

不能！但你可以：

1. 用 Python 写爬虫获取数据；
2. 用 Node.js 启一个 API 服务；
3. 用 Vue 写前端页面调用该 API 展示数据。

这是典型的全栈开发流程，也是求职时的加分项！

---

下一步学习建议

你已经迈出了关键一步！接下来按这个路径走：

1. 巩固基础

   • 学习 computed、watch、props、emit；
   • 理解生命周期（Vue 3 用 onMounted 等）。

2. 路由与状态管理

   • 安装 vue-router 实现多页面跳转；
   • 学习 Pinia（Vue 官方状态库）管理全局数据。

3. 连接真实 API

   • 用 fetch 或 axios 请求后端数据；
   • 尝试对接一个公开 API（如 GitHub 用户信息）。

4. 部署上线

   • 运行 npm run build 生成静态文件；
   • 用 Vercel 或 Netlify 免费部署，分享给朋友！

5. 拓展技能树

   • 学 TypeScript 提升代码健壮性；
   • 了解 Vite（新一代构建工具，比 Webpack 快）。

---

最后的话

我写这篇教程，就是希望你能少走我当年踩过的坑。Vue 的设计哲学是“渐进式”——你可以先用它增强一个普通网页，再逐步构建复杂应用。

记住：不要试图一次学完所有东西。先做出一个小东西，获得正反馈，比死磕理论重要得多。

如果你完成了这个 Todo 应用，不妨在 GitHub 上开源它，这将成为你求职简历中的第一个作品！前端岗位非常看重动手能力，一个能跑的 Demo 胜过十页自我介绍。

加油，未来的前端工程师！有问题欢迎在我的博客评论区留言～