前端核心框架vue之（指令案例篇1/5）
🧾 Vue 综合指令实战练习 - 任务管理小工具
📌 项目名称
Vue2 核心指令实战 - 我的任务列表
🎯 开发目标
开发一个基于 Vue2 的「任务管理小工具」，实现添加任务、编辑任务、设置优先级、完成状态切换、删除任务等功能。
要求使用 Vue 常用指令完成交互逻辑与页面渲染，适合用于前端入门练习和综合训练。
📐 页面结构要求
- 任务输入区域
- 输入框：用于输入任务文本内容
- 优先级下拉框（高 / 普通）
- 添加按钮
- 任务列表展示区域
- 显示所有已添加的任务
- 每条任务包括：
- 勾选框：切换是否完成
- 文本展示或可编辑输入框（双击进入编辑）
- 优先级可选下拉框
- 删除按钮（删除前弹出确认框）
- 底部统计区域
- 显示任务总数
- 显示已完成任务数量
🛠️ 功能需求
| 编号 | 功能描述 | 说明 |
|---|---|---|
| F1 | 添加任务 | 输入内容 + 选择优先级后点击“添加任务”或按回车键，添加到任务列表 |
| F2 | 列表展示任务 | 使用列表形式展示所有任务项 |
| F3 | 勾选完成状态 | 每条任务前有勾选框，支持切换“已完成”状态 |
| F4 | 动态样式显示 | 已完成任务文字变绿 + 删除线，高优先级任务文字变红 |
| F5 | 编辑任务内容 | 双击任务文本进入编辑状态，失焦或回车保存修改 |
| F6 | 修改任务优先级 | 每条任务下方支持优先级修改（高 / 普通） |
| F7 | 删除任务（确认） | 点击“删除”按钮时弹出确认框，确认后删除任务 |
| F8 | 统计信息展示 | 显示任务总数和已完成任务数量 |
| F9 | 本地数据保存（暂时选做） | 使用 localStorage 实现任务自动保存，下次刷新保留 |
🔧 技术要求
- 使用 Vue 2 CDN 模式开发
- 使用以下指令完成开发：
v-model：表单双向绑定v-for：循环渲染列表v-if/v-else：条件渲染v-show：可选显示v-bind/:class/:style：绑定属性与样式v-on/@click/@keyup.enter：事件绑定v-html：插入 HTML 内容（完成提示）
📎 设计约束说明
- 页面风格简洁明了，可使用基础 CSS 实现样式
- 所有数据保存在内存中（localStorage 为选做）
- 任务文本不能为空，优先级必须选择才能添加
- 编辑时不能为空字符串
- 每条任务具有唯一 id（可自增）
📌 补充说明（暂时选做）
以下为选做增强项，完成基本功能后可继续实现：
| 编号 | 说明 |
|---|---|
| O1 | 本地数据保存：将任务列表存入 localStorage，刷新页面仍能恢复 |
✅ 验收标准
- 页面结构符合需求
- 所有核心功能（F1-F8）逻辑完整
- Vue 核心指令运用合理
- 添加 / 编辑 / 删除 / 勾选 / 样式联动等效果正确
- 页面无报错、交互流畅