零基础入门 Vue.js 开发指南
一、开篇：什么是 Vue.js？它能用来做什么？
Vue.js（简称 Vue） 是一个流行的 JavaScript 框架，帮助我们更方便地开发网页应用。你可以把它理解为“建造网站的积木工具”，它可以让你：
- 更快地构建交互式网页
- 轻松管理页面上的数据和逻辑
- 构建现代、动态的前端应用程序
无论你是想做一个简单的个人网站、博客，还是企业级管理系统，Vue 都非常适合你作为前端入门的选择。
二、环境准备：从零开始搭建 Vue 开发环境
第一步：安装 Node.js 和 npm
Node.js 是运行 JavaScript 的运行环境，npm 是它的包管理器，相当于“软件商店”。我们可以用它们来创建和管理 Vue 项目。
👉 点击下载安装 Node.js（建议选择 LTS 版本）
安装完成后，打开命令行输入以下命令查看是否安装成功：
node -v # 应该显示类似 v18.x.x
npm -v # 显示版本号说明 npm 安装好了
第二步：安装 Vue CLI（脚手架工具）
Vue CLI 是 Vue 提供的快速生成项目结构的工具，就像帮你搭好了一个房子的骨架。
在命令行中执行：
npm install -g @vue/cli
验证安装是否成功：
vue --version
如果看到版本号，说明安装成功！
第三步：创建第一个 Vue 项目
接下来我们创建一个名为 my-first-vue-app 的项目：
vue create my-first-vue-app
然后会弹出选项界面，我们选择 默认配置，直接按回车确认即可。
进入项目目录并启动开发服务器：
cd my-first-vue-app
npm run serve
等待几秒后，你会看到一个地址，比如：
App running at:
Local: http://localhost:8080/
打开浏览器访问这个地址，你就能看到 Vue 默认的欢迎页面了！
🎯 到此为止，你的 Vue 开发环境就准备好了！🎉
三、核心概念：Vue 中的关键知识都在这里
1. Vue 实例是整个应用的核心
每个 Vue 应用都要先创建一个 Vue 实例，就像给房子装上电一样，它是整个程序的基础。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个 Vue 程序</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
// 创建 Vue 实例
var app = new Vue({
el: '#app', // 控制哪个元素
data: { // 数据
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
📌 这段代码展示了最简单的 Vue 使用方式。我们把变量 message 放到 HTML 中，通过 {{ message }} 来展示数据。
2. 数据驱动视图
在 Vue 中，数据变了，页面也会自动更新。
data: {
name: '小明'
}
HTML：
<p>名字是：{{ name }}</p>
如果我们后面修改了 name，比如：
app.name = '小红'
你会发现页面内容自动变成了“小红”！
3. 响应用户操作 —— methods 方法
我们可以给按钮绑定点击事件，并执行方法。
<div id="app">
<button @click="sayHello">点我</button>
<p>{{ message }}</p>
</div>
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods: {
sayHello() {
this.message = '你好呀！'
}
}
})
📌 @click 是 Vue 的事件写法，等价于原生 JS 的 onclick
4. 条件渲染 —— v-if
根据条件来决定要不要显示某个元素。
<p v-if="showMessage">显示这句话</p>
<button @click="toggleMessage">切换显示</button>
data: {
showMessage: true
},
methods: {
toggleMessage() {
this.showMessage = !this.showMessage
}
}
5. 循环列表 —— v-for
我们可以用 Vue 快速遍历数组，展示多条数据。
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
data: {
items: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橘子' }
]
}
✅ 总结一下常用指令：
| 指令 | 作用 |
|---|---|
{{ 数据绑定 }} |
把变量值显示到网页上 |
v-if |
根据条件判断显示与否 |
v-show |
控制显示隐藏 |
v-on: 或 @ |
绑定事件 |
v-model |
双向数据绑定，常用于表单 |
v-for |
循环列表或数组 |
四、实战项目：做一个简单的学生信息表
目标：
用 Vue 做一个可以增删学生信息的表格。
步骤 1：基本结构搭建
<div id="app">
<input v-model="newStudent" placeholder="请输入学生姓名">
<button @click="addStudent">添加学生</button>
<ul>
<li v-for="(student, index) in students" :key="index">
{{ student }}
<button @click="deleteStudent(index)">删除</button>
</li>
</ul>
</div>
步骤 2：写 Vue 逻辑
new Vue({
el: '#app',
data: {
newStudent: '',
students: ['张三', '李四']
},
methods: {
addStudent() {
if (this.newStudent.trim()) {
this.students.push(this.newStudent)
this.newStudent = '' // 清空输入框
}
},
deleteStudent(index) {
this.students.splice(index, 1)
}
}
})
✅ 最终效果如下：
- 输入名字，点击【添加】，名字就会出现在列表里；
- 每一项都有删除按钮，点击就能删除对应的名称。
五、常见问题解答（FAQ）
Q1：为什么我修改数据页面不刷新？
可能原因：
- 你在
data外定义了变量。 - 你用了数组索引的方式赋值，如
arr[0] = '新值'，Vue 不会检测这种变化。
✅ 正确方式：
使用 push() 或 splice() 修改数组；使用 this.$set() 添加响应式属性。
Q2：Vue 怎么和后端配合？
通常我们会用 axios 发送请求获取后端数据，例如：
npm install axios
使用示例：
import axios from 'axios'
mounted() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
this.users = response.data
})
}
Q3：Vue 2 和 Vue 3 有什么区别？
简单来说：
| 功能点 | Vue 2 | Vue 3 |
|---|---|---|
| 写法 | Options API | 新增 Composition API |
| 更小更快 | 一般 | 更小、更快 |
| 支持 TypeScript | 默认支持 | 更好的 TS 支持 |
✅ 学习建议：如果是初学者，推荐从 Vue 2 入门，因为语法更直观。
六、学习建议：下一步怎么学？
掌握了 Vue 的基础知识之后，你可以继续学习这些内容：
- 组件化开发：学会用组件来拆分复杂的页面功能
- Vue Router：实现页面跳转（类似网站导航）
- Vuex / Pinia：学习状态管理（多个组件共享数据）
- Axios 请求后端接口：获取真实数据
- 项目实战进阶：尝试做完整的管理系统、购物车系统等
📚 推荐学习资源：
- Vue 官方文档：https://cn.vuejs.org
- Vue3 中文教程：https://vuejs.org/guide/
- B站免费课程：搜索“Vue 小白教程”有很多讲解
结语
恭喜你走完了 Vue 学习的第一步！虽然刚开始可能有点难懂，但只要你愿意动手敲代码，坚持实践，很快就能做出漂亮的网页来了！
如果你喜欢这样的教程风格，欢迎继续关注后续更多《零基础系列》教学文章，让我们一起轻松快乐地学习编程吧！😊
📄 全文约 2000 字 | 配合代码练习 | 图解思路 | 初学者友好
评论 0