Vue 3 超小白入门教程：10分钟做个待办清单！

本文链接：https://blog.csdn.net/m0_69091618/article/details/146092588

什么是Vue 3
用它写网页，不用吭哧吭哧手动改页面，你只要管好数据，它自动帮你把页面刷得明明白白。

举个栗子🌰：

自动刷新页面
比如你有个网页输入框，用户打字时，数据变了，页面内容自动跟着变（类似 Excel 表格里改个数字，其他格子自动算好）。
代码像搭积木
以前写代码要把数据、方法、样式分开放（像把螺丝刀、扳手分不同抽屉），现在可以把「登录功能」的所有代码堆一起（像把工具装一个盒子，随用随拿）。
速度更快、体积更小
相当于把旧车发动机换成超跑的，还轻了 40%，跑起来嗖嗖的。
解决烦人问题
- 弹窗乱飘：以前弹窗可能被其他元素挡住，现在直接「传送」到页面最外层，稳如老狗。
- 异步加载：比如等数据时，先显示个「加载中...」，不用自己写复杂逻辑。

啥时候用 Vue 3？

做动态网页（比如后台管理系统、实时数据仪表盘）
想快速开发还容易维护（尤其团队协作）
需要页面反应快、不卡顿

一句话总结：

Vue 3 就是让你少写代码、少操心，把重复活交给框架干，你只管核心逻辑！
（类似做饭用预制菜——不用切菜洗菜，直接下锅炒就完事）

一、环境搭建：10分钟搞定！

1. 安装 Node.js（就像给电脑装个“发动机”）

第一步：打开 Node.js官网，点击左边的 LTS版本（稳定版）下载安装，一路点“下一步”就行。
第二步：装完后，检查是否成功：
- 按 Win + R 打开运行窗口 → 输入 cmd 回车 → 输入命令：
```
node -v
```
- 如果显示版本号（比如 v18.16.0），说明安装成功！

2. 创建Vue3项目（用官方工具“一键生成”）

第一步：在命令行输入：
```
npm create vue@latest
```
- 如果提示安装 create-vue，直接按回车确认。
第二步：按提示设置项目：
- 输入项目名（比如 todo-demo）→ 按回车。
- 其他选项全部选 No（新手不用管，直接回车到底）。
第三步：进入项目文件夹并安装依赖：
```
cd todo-demo
npm install
```
- 这一步会下载Vue3需要的所有“零件”，耐心等待1-3分钟。

3. 启动项目（看看效果！）

输入命令：
```
npm run dev
```
浏览器会自动打开 http://localhost:5173，看到下面这个页面就成功啦！

二、项目结构：5个核心文件说明

用VS Code打开项目文件夹，主要看这几个文件：

todo-demo/
  ├─ src/
  │   ├─ App.vue       // 主组件（在这里写代码）
  │   └─ main.js       // 项目入口（不用动）
  ├─ index.html        // 网页模板（不用动）
  └─ vite.config.js    // 配置文件（不用动）

重点文件：App.vue，我们的代码都写在这里！

三、手写待办清单：代码逐行解析

1. 清空默认代码

打开 App.vue，删掉所有内容，替换为以下框架：

<template>
  <!-- 页面结构（类似HTML） -->
</template>

<script setup>
  // JavaScript代码
</script>

<style>
  /* CSS样式（美化页面） */
</style>

2. 写HTML结构（模板部分）

在 <template> 内添加：

<div class="app">
  <h1>我的待办清单 📝</h1>
  
  <!-- 输入框和添加按钮 -->
  <div class="input-area">
    <input 
      type="text" 
      v-model="newTodo" 
      placeholder="输入任务，按回车添加"
      @keyup.enter="addTodo"
    >
    <button @click="addTodo">添加</button>
  </div>

  <!-- 任务列表 -->
  <ul v-if="todos.length > 0">
    <li v-for="(todo, index) in todos" :key="index">
      {{ todo }}
      <button @click="removeTodo(index)">×</button>
    </li>
  </ul>
  
  <!-- 提示无任务 -->
  <p v-else>暂无任务，快去添加吧！</p>
</div>

代码解析：

v-model="newTodo"：输入框内容和 newTodo 变量实时绑定（双向绑定）。
@keyup.enter：按回车键触发添加。
v-if 和 v-else：根据是否有任务显示不同内容。
v-for：循环渲染任务列表。

3. 写JavaScript逻辑（响应式数据）

在 <script setup> 内添加：

import { ref } from 'vue';

// 定义数据
const newTodo = ref(''); // 输入框的内容
const todos = ref([]);   // 存储所有任务

// 添加任务
const addTodo = () => {
  if (newTodo.value.trim()) { // 防止输入空格
    todos.value.push(newTodo.value.trim()); // 添加到数组
    newTodo.value = ''; // 清空输入框
  }
};

// 删除任务
const removeTodo = (index) => {
  todos.value.splice(index, 1); // 从数组中删除
};

代码解析：

ref()：定义响应式数据（数据变，页面自动更新）。
todos.value：通过 .value 访问响应式数据。

4. 写CSS样式（美化页面）

在 <style> 内添加：

.app {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.input-area {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background: #42b883;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #359c6c;
}

ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

li {
  padding: 10px;
  background: #f8f9fa;
  margin: 8px 0;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li button {
  background: #ff6b6b;
  padding: 5px 10px;
}

li button:hover {
  background: #ff5252;
}

p {
  color: #666;
  text-align: center;
}