引言：为什么小白学前端首选 Vue？

作为前端三大框架（Vue/React/Angular）之一，Vue 的核心优势就是「友好」：

• 语法简单直观，HTML/CSS/JS 基础薄弱也能快速上手；

• 文档中文齐全，官方教程像 “老师讲课” 一样易懂；

• 渐进式学习：不用一次性掌握所有知识点，学一点就能用一点；

• 生态完善：有现成的 UI 库（Element Plus）、路由工具（Vue Router），开发效率高。

本文专为零基础 / 前端新手设计，全程手把手教学，学完就能独立开发简单的 Vue 应用（比如待办清单、个人博客页面）。

---

一、环境搭建：3 步搞定 Vue 开发环境

1. 必备工具：安装 Node.js

Vue 项目依赖 Node.js（运行 JavaScript 的环境），步骤如下：

1. 打开官网：Node.js 下载，选择「长期维护版」（比如 18.x 版本）；

1. 安装时一路点击 “下一步”（默认选项即可，无需修改）；

1. 验证是否安装成功：打开电脑「命令提示符（CMD）」，输入以下命令，能显示版本号就是成功：

node -v # 显示Node版本（如v18.16.0）

npm -v # 显示npm版本（如9.5.1）

2. 安装 Vue CLI（项目脚手架）

Vue CLI 能快速创建标准化的 Vue 项目，CMD 中输入以下命令：

npm install -g @vue/cli

• 验证安装：输入 vue --version，显示版本号（如 5.0.8）即可。

3. 创建第一个 Vue 项目

1. 选择一个文件夹（比如 “桌面→Vue 项目”），在 CMD 中进入该文件夹：

cd 桌面/Vue项目 # 切换目录（根据自己的文件夹路径修改）

1. 创建项目：输入以下命令，项目名建议用英文（比如vue-todo-app）：

vue create vue-todo-app

1. 选择配置：新手直接按「回车」选择「Default ([Vue 3] babel, eslint)」（Vue 3 默认配置）；

1. 等待安装：耐心等待 2-5 分钟（取决于网络），出现 “Successfully created project” 就是创建成功；

1. 运行项目：输入以下 2 条命令，启动本地服务器：

cd vue-todo-app # 进入项目文件夹

npm run serve # 启动项目

1. 访问项目：打开浏览器，输入 http://localhost:8080，看到 Vue 的欢迎页面，就说明环境搭建完成！

---

二、项目结构解析：小白只需要关注这 3 个文件

Vue 项目文件夹很多，但新手不用逐个研究，重点关注 src 目录下的 3 个核心文件：

src/

├── App.vue # 根组件（整个应用的入口）

├── components/ # 公共组件文件夹（比如按钮、卡片组件）

└── main.js # 项目入口文件（初始化Vue应用）

关键文件说明（用 “房子” 比喻）：

• main.js：相当于 “房子的地基”，负责把 Vue 应用挂载到页面上；

• App.vue：相当于 “房子的主体”，所有页面内容都在这里组合；

• components/：相当于 “房子的家具”，可以重复使用的小部件（比如导航栏、列表项）。

---

三、核心语法入门：5 个必学知识点（带实战代码）

Vue 的核心是「数据驱动视图」—— 不用手动操作 DOM，只要修改数据，页面就会自动更新。下面用最简单的例子，讲解新手必学的语法。

1. 响应式数据：让数据 “活” 起来

响应式数据是 Vue 的灵魂：你修改数据，页面会实时同步变化。Vue 3 中用 ref 或 reactive 定义响应式数据（新手先掌握 ref 即可）。

实战：计数器（最经典的入门例子）

打开 App.vue，替换为以下代码（注释详细，直接复制可用）：

>

：显示数据 + 触发事件 -->

class="counter">

：{{ count }}> ：显示count的值 -->

addCount">+1</button> 事件：触发addCount函数 -->

click="subCount">-1</button>

</div>

脚本：定义数据和逻辑（setup语法糖，新手直接用）

import { ref } from 'vue'; // 从Vue中导入ref函数

// 定义响应式数据：count初始值为0

const count = ref(0);

// 定义点击事件的处理函数

const addCount = () => {

count.value += 1; // ref定义的数据，要通过.value修改

};

const subCount = () => {

count.value -= 1;

};

/* 样式：scoped表示样式只作用于当前组件 */

.counter {

text-align: center;

margin-top: 50px;

}

button {

margin: 0 10px;

padding: 8px 16px;

font-size: 16px;

}

>

• 保存文件后，浏览器会自动刷新，点击按钮就能看到计数变化；

• 关键知识点：

1. 1. 插值语法 {{ 变量名 }}：在模板中显示数据；

1. 1. ref(初始值)：定义简单类型的响应式数据（数字、字符串、布尔值）；

1. 1. @click：绑定点击事件（@ 是 v-on: 的简写）。

2. 模板指令：简化页面逻辑

指令是 Vue 模板中的特殊标记（以 v- 开头），用来实现条件判断、列表渲染等逻辑，新手必学 3 个核心指令：

指令	作用	示例
v-if	条件渲染（显示 / 隐藏）	`-if="isShow"> 显示内容
v-bind	绑定属性（简写 :）	="imgUrl" alt="图片">

实战：用指令实现 “显示 / 隐藏列表”

修改 App.vue 的模板和脚本部分：

>

="demo">

<button @click="toggleShow">切换列表显示>

：isShow为true时显示列表 -->

<ul v-if="isShow">

：循环渲染list数组中的数据 -->

v-for="(item, index) in list" :key="index">

{{ index + 1 }}. {{ item }}

</li>

</ul>

>

<script setup>

import { ref } from 'vue';

// 响应式数据：控制列表显示/隐藏

const isShow = ref(true);

// 响应式数组：要渲染的列表数据

const list = ref(['学习Vue', '掌握响应式', '开发小项目']);

// 切换显示状态

const toggleShow = () => {

isShow.value = !isShow.value;

};

• 关键点：v-for 必须加 :key（唯一标识，避免渲染错误），新手可用 index（索引）临时替代。

3. 双向绑定：数据和表单同步

v-model 指令实现「表单数据 ↔ 响应式数据」双向同步：修改表单内容，数据自动更新；修改数据，表单内容也自动更新。

实战：输入框双向绑定

<template>

class="input-demo">

v-model="username"

placeholder="请输入用户名"

type="text"

>

用户名：{{ username }}</p>

</template>

setup>

import { ref } from 'vue';

const username = ref(''); // 初始值为空字符串

• 无需写任何事件处理，输入框的内容会实时同步到 username 中，页面也会实时显示。

4. 组件基础：拆分重复代码

组件是 Vue 的核心思想之一：把页面拆成多个可复用的小部件（比如导航栏、卡片、按钮），减少重复代码，方便维护。

实战：创建并使用一个 “卡片组件”

1. 在 components 文件夹下新建文件 Card.vue，写入以下代码：

.vue -->

card">

3>{{ title }}> 组件传递的title属性 -->

}}</p> 父组件传递的content属性 -->

</template>

setup>

// 定义组件的“属性”（父组件可以传递数据过来）

const props = defineProps({

title: {

type: String,

required: true // 必须传递title属性

},

content: {

type: String,

default: '默认内容' // 可选属性，默认值

}

});

</script>

scoped>

.card {

border: 1px solid #eee;

border-radius: 8px;

padding: 20px;

margin: 10px;

width: 300px;

}

1. 在 App.vue 中使用这个组件：

">

Card组件，传递title和content属性 -->

<Card title="Vue入门" content="数据驱动视图，双向绑定很方便！" />

="组件优势" content="复用代码，维护更简单" />

>

<script setup>

// 导入Card组件（无需注册，Vue 3自动识别）

import Card from './components/Card.vue';

</script>

oped>

.app {

display: flex;

justify-content: center;

margin-top: 50px;

}

- 关键点：组件通过 `defineProps` 接收父组件数据，使用时直接像HTML标签一样调用，属性名用短横线（如 `title`）或驼峰（`cardTitle`）均可。

### 5. 生命周期：组件的“一生”

生命周期钩子是组件从「创建→渲染→更新→销毁」过程中的“时间节点”，新手只需掌握2个最常用的：

- `onMounted`：组件挂载到页面后执行（比如初始化数据、发送请求）；

- `onUnmounted`：组件销毁前执行（比如清除定时器、取消请求）。

**实战：组件挂载后初始化数据**

```vue

<div>

<h3>生命周期示例</h3>

<p>{{ message }}

</template>

>

import { ref, onMounted } from 'vue';

const message = ref('');

// 组件挂载后执行

onMounted(() => {

console.log('组件已经挂载到页面上了！');

message.value = 'Hello Vue 3！'; // 挂载后修改数据

});

>

• 打开浏览器控制台（F12），能看到 console.log 的输出，页面会显示 Hello Vue 3！。

---

四、综合实战：开发一个待办清单（Todo List）

整合前面所有知识点，开发一个能「添加→勾选→删除」的待办清单，新手跟着做就能掌握核心技能！

最终效果：

• 输入待办事项，点击 “添加” 按钮，新增到列表；

• 勾选复选框，标记事项为 “已完成”（文字变灰色、加删除线）；

• 点击 “删除” 按钮，删除对应的待办事项。

完整代码（替换 App.vue）：

">

>我的待办清单</h1>

输入框：双向绑定todoText -->

<div class="add-todo">

v-model="todoText"

placeholder="请输入待办事项"

@keyup.enter="addTodo" 按回车也能添加 -->

>

Todo">添加

：v-for循环渲染 -->

todo-list">

<li v-for="(todo, index) in todoList" :key="index" class="todo-item">

="checkbox"

v-model="todo.done