第2课：零基础前端框架实操入门——从核心语法到第一个完整项目

在前两课中，我们已经明确了前端框架的选择逻辑（优先Vue.js），也梳理了零基础学习的避坑要点。本节课将进入核心实操阶段，带领大家从"理论认知"落地到"代码实践"，完成从"框架基础语法"到"第一个完整交互项目"的跨越。本节课的核心目标是：掌握Vue 3的核心实用语法，能独立搭建项目结构，完成一个具备增删改查功能的基础交互项目，为后续进阶学习打下实操基础。

一、课前准备：环境搭建（10分钟搞定，新手零配置）

工欲善其事，必先利其器。前端框架学习的第一步是搭建开发环境，我们全程使用官方推荐的"零配置"工具，避免新手陷入配置焦虑。

1. 必备工具清单（新手直接照做）

代码编辑器：VS Code（免费，官网直接下载，安装后推荐安装3个插件：Volar（Vue官方推荐，语法高亮+提示）、Chinese (Simplified)（中文汉化）、Live Server（本地预览页面））；
运行环境：Node.js（框架依赖Node.js运行，下载LTS稳定版（长期支持版），安装时勾选"Add to PATH"，自动配置环境变量，安装完成后打开cmd输入"node -v"，显示版本号即安装成功）；
浏览器：Chrome（调试功能最强，后续调试代码全靠它）。

2. 快速搭建Vue 3项目（官方推荐指令，复制即用）

打开VS Code，新建"终端"（顶部菜单栏：终端-新建终端），输入以下指令，按提示操作即可：

创建项目：npm create vite@latest my-first-vue-project -- --template vue（指令说明："my-first-vue-project"是项目名称，可自定义，"--template vue"表示使用Vue基础模板）；
进入项目目录：cd my-first-vue-project（指令说明：切换到刚刚创建的项目文件夹下）；
安装依赖：npm install（指令说明：安装项目所需的基础依赖，等待终端显示安装完成即可）；
启动项目：npm run dev（指令说明：启动本地开发服务器，终端会显示一个本地地址，类似"http://127.0.0.1:5173/"，复制到Chrome浏览器打开，能看到Vue的默认页面，即搭建成功）。

新手避坑：如果输入指令后提示"npm不是内部或外部命令"，大概率是Node.js安装时没勾选"Add to PATH"，重新安装Node.js并勾选该选项即可；如果启动项目失败，可删除项目文件夹下的"node_modules"文件夹，重新执行"npm install"后再启动。

3. 项目目录快速认知（不用死记，先懂核心文件）

启动项目后，我们先简单了解项目目录的核心文件，避免后续写代码找不到位置：

src文件夹：核心代码目录，我们所有的开发工作都在这里进行；
src/App.vue：根组件，相当于项目的"主页面"，所有页面内容都在这里汇总展示；
src/components文件夹：组件存放目录，后续我们写的可复用模块（比如按钮、列表项）都放在这里；
index.html：项目入口HTML文件，不用修改，框架会自动关联；
package.json：项目依赖配置文件，记录项目所需的插件和脚本指令。

二、核心实操一：Vue 3核心语法（Composition API）入门

Vue 3推荐使用Composition API（组合式API），相比传统的Options API，它更灵活、更适合复杂项目，也是当前企业的主流用法。我们聚焦"新手必用"的核心语法，不贪多，先够用。

1. 第一个语法：数据绑定（ref/reactive）------ 让数据和视图联动

核心目标：学会定义数据，让数据变化时，页面自动更新（这就是Vue的"响应式"核心）。

实操步骤（打开src/App.vue，替换默认代码）：

基础结构：Vue文件由<template>（页面结构）、<script setup>（逻辑代码）、<style>（样式）三部分组成，先写好基础结构；
定义响应式数据：
1. ref：用于定义基本类型数据（字符串、数字、布尔值），比如用户名、年龄；
2. reactive：用于定义复杂类型数据（对象、数组），比如用户信息、商品列表。
页面绑定数据：在<template>中用"{{ 数据名 }}"直接渲染数据。

示例代码（可直接复制到App.vue中，运行后查看效果）：

复制代码

<template> <div class="app"> <h1>{``{ username }}的第一个Vue项目</h1> <p>年龄：{``{ age }}</p> <p>个人信息：{``{ userInfo.gender }}，{``{ userInfo.hobby }}</p> </div> </template> <script setup> // 导入ref和reactive（Composition API需要手动导入） import { ref, reactive } from 'vue' // 用ref定义基本类型数据 const username = ref('前端新手') const age = ref(22) // 用reactive定义复杂类型数据 const userInfo = reactive({ gender: '男', hobby: '学习前端框架' }) </script> <style> .app { padding: 20px; } </style>

效果验证：启动项目后，浏览器会显示对应的数据；如果我们在代码中修改username的值（比如把'前端新手'改成'Vue学习者'），保存后浏览器会自动更新页面，这就是响应式的效果。

2. 第二个语法：事件绑定（@click）------ 实现页面交互

核心目标：学会给按钮、输入框等元素绑定事件，实现"点击按钮修改数据""输入内容同步更新"等交互效果。

核心语法：在元素上用"@事件名="事件处理函数""绑定事件，常用事件：@click（点击事件）、@input（输入框输入事件）。

实操任务：在刚才的示例基础上，添加2个功能：① 点击按钮修改年龄；② 输入框输入内容，同步更新username。

示例代码（修改App.vue的template和script部分）：

复制代码

<template> <div class="app"> <h1>{``{ username }}的第一个Vue项目</h1>  <input type="text" @input="updateUsername" placeholder="请输入用户名"> <p>年龄：{``{ age }}</p>  <button @click="increaseAge">增加年龄</button> <p>个人信息：{``{ userInfo.gender }}，{``{ userInfo.hobby }}</p> </div> </template> <script setup> import { ref, reactive } from 'vue' const username = ref('前端新手') const age = ref(22) const userInfo = reactive({ gender: '男', hobby: '学习前端框架' }) // 定义事件处理函数：更新用户名 const updateUsername = (e) => { // e.target.value是输入框的当前内容 username.value = e.target.value } // 定义事件处理函数：增加年龄 const increaseAge = () => { // ref定义的数据需要通过.value修改 age.value += 1 } </script>

关键提醒：用ref定义的数据，修改时必须加".value"（比如username.value），而reactive定义的对象，直接修改属性即可（比如userInfo.hobby = '学习React'），这是新手最容易忘的点！

3. 第三个语法：条件渲染与列表渲染（v-if/v-for）------ 动态控制页面元素

核心目标：学会根据数据状态动态显示/隐藏元素，以及循环渲染列表数据（比如商品列表、待办事项）。

v-if：根据条件显示/隐藏元素（条件为true显示，false隐藏），可搭配v-else-if、v-else使用；
v-for：循环渲染数组数据，语法：v-for="(item, index) in 数组" :key="index"（key用于唯一标识列表项，提高渲染效率）。

实操任务：添加2个功能：① 根据年龄判断是否显示"成年提示"；② 循环渲染一个待办事项列表。

示例代码（继续修改App.vue）：

复制代码

<template> <div class="app"> <h1>{``{ username }}的第一个Vue项目</h1> <input type="text" @input="updateUsername" placeholder="请输入用户名"> <p>年龄：{``{ age }}</p> <button @click="increaseAge">增加年龄</button>  <p v-if="age >= 18" style="color: green;">已成年，可独立开发项目</p> <p v-else style="color: red;">未成年，建议先打好基础</p> <p>个人信息：{``{ userInfo.gender }}，{``{ userInfo.hobby }}</p>  <div class="todo-list"> <h3>我的待办事项</h3> <ul> <li v-for="(todo, index) in todoList" :key="index"> {``{ index + 1 }}. {``{ todo }} </li> </ul> </div> </div> </template> <script setup> import { ref, reactive } from 'vue' const username = ref('前端新手') const age = ref(22) const userInfo = reactive({ gender: '男', hobby: '学习前端框架' }) // 定义待办事项数组 const todoList = ref(['学习Vue核心语法', '完成第一个项目', '学习组件化']) const updateUsername = (e) => { username.value = e.target.value } const increaseAge = () => { age.value += 1 } </script>

三、核心实操二：组件化开发（新手入门版）

组件化是前端框架的核心思想，目的是"代码复用"------把页面中可复用的部分（比如按钮、列表项、头部导航）拆成独立的组件，后续可多次调用，减少重复代码。本节课我们先掌握"基础组件的创建与使用"。

1. 步骤1：创建组件（在components文件夹下新建）

实操：在src/components文件夹下新建文件"TodoItem.vue"（待办事项组件），组件文件命名建议首字母大写，便于区分。

组件代码（TodoItem.vue）：

复制代码

<template> <li class="todo-item">{``{ todoText }}</li> </template> <script setup> // 接收父组件传递的数据（props） const props = defineProps({ todoText: { type: String, required: true // 要求父组件必须传递该数据 } }) </script> <style> .todo-item { margin: 5px 0; padding: 5px; border: 1px solid #eee; } </style>

2. 步骤2：在父组件中使用组件（App.vue中调用）

核心步骤：① 导入组件；② 在template中使用组件；③ 给组件传递数据（通过属性传递）。

修改App.vue的代码（重点修改列表渲染部分）：

复制代码

<template> <div class="app">  <div class="todo-list"> <h3>我的待办事项</h3> <ul>  <TodoItem v-for="(todo, index) in todoList" :key="index" :todoText="todo" /> </ul> </div> </div> </template> <script setup> import { ref, reactive } from 'vue' // 1. 导入组件 import TodoItem from './components/TodoItem.vue' // 其他代码不变... </script>

效果验证：启动项目后，待办事项会显示组件中的样式（带边框），说明组件调用成功；如果父组件不传递todoText属性，控制台会报错，这就是props校验的作用。

四、综合实战：完成一个具备增删改查的待办事项项目

基于前面的语法学习，我们完善待办事项项目，新增2个核心功能：① 新增待办事项（输入内容点击按钮添加）；② 删除待办事项（点击待办项删除），最终完成一个"增删查"的完整项目。

1. 新增功能：添加待办事项

修改App.vue，添加输入框和添加按钮，定义添加函数：

复制代码

<template> <div class="app"> <div class="todo-list"> <h3>我的待办事项</h3>  <div class="add-todo"> <input type="text" v-model="newTodo" placeholder="请输入新的待办事项"> <button @click="addTodo">添加</button> </div> <ul> <TodoItem v-for="(todo, index) in todoList" :key="index" :todoText="todo" :index="index" @deleteTodo="deleteTodo" /> </ul> </div> </div> </template> <script setup> import { ref } from 'vue' import TodoItem from './components/TodoItem.vue' const todoList = ref(['学习Vue核心语法', '完成第一个项目', '学习组件化']) const newTodo = ref('') // 绑定新增输入框的内容 // 新增待办事项函数 const addTodo = () => { // 过滤空内容 if (newTodo.value.trim() === '') return // 把输入的内容添加到todoList数组 todoList.value.push(newTodo.value.trim()) // 清空输入框 newTodo.value = '' } // 删除待办事项函数（后续用于接收子组件的事件） const deleteTodo = (index) => { // 删除数组中对应索引的元素 todoList.value.splice(index, 1) } </script>

2. 新增功能：删除待办事项（子组件向父组件传值）

核心逻辑：子组件（TodoItem）点击时，通过"自定义事件"把要删除的索引传递给父组件（App），父组件接收后执行删除操作。

修改TodoItem.vue的代码：

复制代码

<template> <li class="todo-item" @click="handleDelete"> {``{ todoText }} <span class="delete-btn">×</span> </li> </template> <script setup> const props = defineProps({ todoText: { type: String, required: true }, index: { type: Number, required: true } // 接收父组件传递的索引 }) // 定义自定义事件，向父组件传递删除信号 const emit = defineEmits(['deleteTodo']) const handleDelete = () => { // 触发自定义事件，把索引传递给父组件 emit('deleteTodo', props.index) } </script> <style> .todo-item { margin: 5px 0; padding: 5px; border: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .delete-btn { color: red; cursor: pointer; font-size: 16px; } .delete-btn:hover { background-color: #f5f5f5; } </style>

3. 项目效果验证与优化

启动项目后，测试3个功能：① 输入内容点击"添加"，能新增待办事项；② 点击待办事项（或×按钮），能删除对应事项；③ 输入空内容点击添加，不会新增（空值过滤）。

新手优化建议：可添加"清空所有待办"按钮，或给已完成的待办事项添加"勾选"功能，巩固所学语法。

五、本节课总结与下节课预告

1. 本节课核心收获

环境搭建：掌握Vue 3项目的快速搭建方法，认识核心项目目录；
核心语法：掌握ref/reactive（响应式数据）、@click/@input（事件绑定）、v-if/v-for（条件/列表渲染）；
组件化：学会创建组件、父传子（props）、子传父（自定义事件）；
项目实战：完成一个具备增删查功能的待办事项项目，落地所学知识。

2. 课后作业（必做）

① 独立复现本节课的待办事项项目，不看教程，从环境搭建到功能实现全程自己敲代码；

② 新增2个功能：a. 清空所有待办事项；b. 点击待办事项后标记为"已完成"（文字变灰色、加删除线）；

③ 整理本节课的踩坑笔记，比如"忘记给ref数据加.value""组件传值时没定义props"等。

3. 下节课预告

下节课我们将学习"Vue 3路由与状态管理入门"，解决"多页面跳转"和"组件间共享数据"的问题，让项目从"单页面"升级为"多页面应用"，逐步贴近企业实际开发需求。