# Vue 待办事项应用 - 使用指南

## 项目概述
这是一个基于 Vue 3 和 Vite 构建的现代化待办事项管理应用，使用了 Composition API 和响应式系统。

## 快速开始

### 1. 环境要求
- Node.js 版本 16.0 或更高
- npm 或 yarn 包管理器

### 2. 安装与运行
```bash
# 进入项目目录
cd todo-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

### 3. 访问应用
开发服务器启动后，在浏览器中访问 `http://localhost:5173`

## 功能使用说明

### 📝 添加待办事项
1. 在顶部输入框中输入待办内容
2. 点击"添加"按钮或按回车键确认添加
3. 新事项将出现在列表中

### ✅ 管理待办事项
- **标记完成**: 点击事项前的复选框
- **修改状态**: 再次点击复选框可取消完成状态
- **删除事项**: 点击右侧的"删除"按钮

### 🔍 筛选查看
应用提供三种查看模式：
- **全部**: 显示所有待办事项
- **未完成**: 只显示未完成的事项
- **已完成**: 只显示已完成的事项

每个筛选按钮显示对应类型的事项数量。

### 🧹 批量操作
- **清除已完成**: 点击底部"清除已完成"按钮，删除所有已完成的事项
- **统计显示**: 底部显示剩余未完成事项的数量

## 界面特性

### 🎨 视觉反馈
- **悬停效果**: 鼠标悬停时显示阴影效果
- **状态变化**: 已完成事项显示删除线和半透明效果
- **按钮状态**: 当前筛选条件高亮显示

### 📱 响应式设计
- 最大宽度 600px，在各种屏幕尺寸下都有良好体验
- 灵活的布局适配不同设备

### 🎯 用户体验
- **自动对焦**: 页面加载时输入框自动获得焦点
- **快捷键**: 支持回车键快速添加
- **空状态**: 无待办事项时显示友好提示

## 技术特点

### Vue 3 Composition API
- 使用 `<script setup>` 语法
- 响应式数据管理 (`ref`, `computed`)
- 现代化的组件开发模式

### 核心功能实现
- **数据持久化**: 使用内存存储（可扩展为 localStorage）
- **状态管理**: 响应式数据自动更新视图
- **事件处理**: 完整的用户交互支持

## 项目结构
```
todo-app/
├── src/
│   ├── App.vue          # 主组件
│   ├── main.js          # 应用入口
│   └── assets/          # 静态资源
├── public/              # 公共资源
├── package.json         # 项目配置
└── vite.config.js       # 构建配置
```

## 扩展建议
1. **数据持久化**: 添加 localStorage 支持
2. **编辑功能**: 支持双击编辑待办内容
3. **分类管理**: 添加标签或分类功能
4. **优先级**: 为待办事项添加优先级标记
5. **到期时间**: 支持设置截止日期

## 学习价值
这个项目适合Vue初学者，涵盖了：
- Vue 3 基础语法
- 响应式数据管理
- 事件处理
- 条件渲染
- 列表渲染
- 计算属性
- CSS 样式绑定

通过实践这个项目，可以掌握Vue现代开发的核心概念和最佳实践。