DAY 04 · 课程开始

Vue 3 实战 + AI 写前端

掌握 4 个最常用指令，并让 AI 从零给你做出一个 Todo 应用

4

指令

1

完整 App

4

小测

CHAPTER 01

Vue 模板语法回顾

Day 3 我们见过这两个

🔗

把变量值显示在页面上。例：{{ count }}

⚡

@事件

绑定点击/输入等事件。例：@click="count++"

🎯

今天再加 4 个最常用的"指令"，你就能写出 80% 的页面交互了。

CHAPTER 02

v-bind & v-model

① v-bind 把变量绑到属性上

简写为冒号 :。例如 :href="url" 等于 v-bind:href="url"。

当前颜色：{{ color }}

点我打开百度

<a :href="url" :style="{color: color}">链接</a>

② v-model 双向绑定

表单输入和数据互通——你打字数据变，数据变输入框也变。

你好，{{ name || '陌生人' }} 👋

<input v-model="name">
<p>你好，{{ name }}</p>

CHAPTER 03

v-if & v-for

③ v-if 条件渲染

条件成立才显示。配合 v-else / v-else-if。

✅ 已登录 ❌ 未登录

<span v-if="logged">已登录</span>
<span v-else>未登录</span>

④ v-for 列表渲染

把数组每一项渲染成 DOM。一定要加 :key。

{{ i + 1 }}. {{ fruit }}

<li v-for="(fruit, i) in fruits" :key="fruit">
  {{ i + 1 }}. {{ fruit }}
</li>

CHAPTER 04 · 实战

真·可运行的 Todo 应用

用本页面的 Vue 3 写的，真能用。增删改查 + 筛选都齐了

📝 我的待办清单

{{ t.text }}

空空如也，添加一条试试 ✨

共 {{ todos.length }} 条 · 完成 {{ doneCount }} · 待办 {{ activeCount }}

💪

试试看：添加任务、勾选完成、切换筛选、删除一条——所有交互都自动同步。这就是 Vue 3 响应式 + 指令的威力。

CHAPTER 05

让 AI 帮你写 Vue 组件

明白原理后，用提示词四要素把 Todo 复制出来

角色：你是一位资深 Vue 3 工程师。
上下文：我做一个待办清单，单 HTML 文件，CDN Vue 3，不用 webpack。
需求：
  · 顶部输入框 + 添加按钮（回车也能添加）
  · 列表展示，每条有勾选框、内容、删除按钮
  · 三个筛选：全部 / 未完成 / 已完成
  · 底部显示总数、完成数、未完成数
约束：
  · 用 setup() + ref/computed
  · 加中文注释
  · 样式简洁现代，圆角卡片
  · 整个文件输出到 todo.html

🎯

本日实战作业：用 AI 把这个 Todo 应用做出来，并加 1 个新功能（编辑 / 清空已完成 / 按时间排序）。

FINAL CHECK

课后小测

答对 3 题以上才能解锁完成

⚡

恭喜完成 Day 4！

四大指令全掌握，并见识了 Vue 响应式的强大。明天开始后端之旅。