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

你好！我是一名开源项目维护者，也带过不少前端新人。记得我当初学 Vue 的时候，官方文档虽然全面，但对完全没接触过前端框架的小白来说，还是有点“信息过载”。尤其看到“响应式”“组件化”这些词，心里直打鼓：这和我之前写的 jQuery 有啥区别？

今天这篇教程，就是为零基础朋友量身打造的。哪怕你只写过 HTML 和 CSS，甚至还没碰过 JavaScript，也能跟着一步步上手 Vue.js。我们不谈高深理论，重点是动手做、看得见效果。

---

为什么选 Vue？它和 React 有什么关系？

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。简单说，它能帮你更轻松地开发交互性强的网页（比如点击按钮弹出内容、动态加载数据等）。

你可能听过 React —— 它是 Facebook 推出的另一个主流前端框架。Vue 和 React 都解决类似问题：让网页“活”起来。但 Vue 的学习曲线更平缓，语法更接近原生 HTML，对新手更友好。

对比项	Vue.js	React
学习难度	⭐⭐（较简单）	⭐⭐⭐（需理解 JSX 等概念）
模板写法	类似 HTML（<template>）	用 JavaScript 写结构（JSX）
社区生态	国内广泛使用，中文资料丰富	全球流行，生态庞大

📌 小提示：不用纠结“选哪个”，先掌握一个，再学另一个会快很多！

至于算法？别担心！前端开发中很少直接写复杂算法（那是后端或算法工程师的事）。你只需要知道：Vue 内部用了很多聪明的算法来高效更新页面，而你只需关注“做什么”，不用管“怎么做”。

---

第一步：搭建开发环境（5 分钟搞定）

1. 安装 Node.js

Vue 项目依赖 Node.js。去 https://nodejs.org 下载 LTS 版本（长期支持版），安装时一路“下一步”即可。

验证是否成功：

node -v  # 应输出版本号，如 v18.17.0
npm -v   # 应输出版本号，如 9.6.7

2. 创建 Vue 项目

打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），执行：

npm create vue@3

按提示操作：

• 项目名：输入 my-vue-app
• 其他选项全部按回车（用默认配置）

完成后进入项目并启动：

cd my-vue-app
npm install
npm run dev

你会看到一行本地地址（如 http://localhost:5173），复制到浏览器打开，就能看到 Vue 的欢迎页面！

---

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

打开项目中的 src/App.vue 文件，删掉所有内容，替换成以下代码：

<template>
  <div>
    <h1>我的第一个 Vue 应用</h1>
    <p>计数器：{{ count }}</p>
    <button @click="increase">点我加 1</button>
  </div>
</template>

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

// 声明一个响应式变量
const count = ref(0)

// 定义方法
function increase() {
  count.value++
}
</script>

关键点解析：

1. <template>：写 HTML 结构的地方。双大括号 {{ }} 叫插值，能动态显示变量。
2. ref()：这是 Vue 3 的核心 API。用它包裹的变量（如 count）是“响应式”的——值一变，页面自动更新！
3. @click：这是 Vue 的事件绑定语法，等价于原生 JS 的 onclick，但更简洁。

💡 我当初卡在这里很久：为什么改 count 要写成 count.value++？因为 ref 返回的是一个对象，真实值在 .value 属性里。这是 Vue 3 的设计，记住就行！

---

实战：做一个待办事项列表（Todo List）

现在我们用刚学的知识，做一个实用小工具。

步骤 1：准备数据结构

在 <script setup> 中添加：

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

步骤 2：渲染列表

在 <template> 中加入：

<ul>
  <li v-for="todo in todos" :key="todo.id">
    <input type="checkbox" v-model="todo.done">
    <span :class="{ done: todo.done }">{{ todo.text }}</span>
  </li>
</ul>

步骤 3：添加新任务

继续在模板中加：

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

并在脚本中定义方法：

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

步骤 4：加点样式

在 <style> 标签里（或单独写 CSS 文件）：

.done {
  text-decoration: line-through;
  color: #999;
}

现在试试看：输入任务、回车添加、勾选完成——一切都会实时生效！

---

新手常见问题解答

❓ 为什么我的页面没更新？

• 检查变量是否用 ref() 包裹
• 修改 ref 变量时是否用了 .value（在 script 中需要，在 template 中不需要）

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

Vue 用 key 来追踪每个元素的身份。如果列表顺序变化，没有 key 会导致渲染错误。永远给 v-for 加唯一 key（通常用 ID）。

❓ Vue 和原生 JS 冲突吗？

完全不冲突！你可以逐步把 Vue 引入现有项目。比如只在某个 <div id="app"> 里用 Vue，其他部分照常写 jQuery。

---

下一步怎么学？我的建议

1. 先玩熟基础：把本文的 Todo List 多改几次（比如加删除功能、本地存储）
2. 官方文档是宝库：Vue 3 中文文档 写得非常清晰，重点看“核心功能”章节
3. 不要急着学全家桶：先掌握 Vue 本身，再考虑 Vue Router（路由）、Pinia（状态管理）
4. 对比学习 React：当你熟悉 Vue 后，试着用 React 实现同样功能，你会发现两者思想相通

🌟 最后一句真心话：编程没有“速成”，但 Vue 真的是前端框架里对新手最友好的之一。你遇到的每个报错、每个卡点，都是成长的阶梯。坚持写代码，三个月后回头看，你会感谢今天开始的自己。

动手试试吧！你的第一个 Vue 应用，就从这一行 npm create vue@3 开始。