# Vue 学习指南 - 项目1: 待办事项应用

## 🎯 学习目标
通过这个待办事项应用，您将学习到Vue的核心概念：
- 响应式数据 (Reactivity)
- 数据绑定 (Data Binding)
- 事件处理 (Event Handling)
- 条件渲染 (Conditional Rendering)
- 列表渲染 (List Rendering)
- 计算属性 (Computed Properties)

## 📚 核心概念详解

### 1. 响应式数据 (ref)
```javascript
const newTodo = ref('')
const todos = ref([...])
```
- `ref()` 创建响应式数据
- 当数据改变时，UI会自动更新
- 在模板中直接使用，在script中需要`.value`

### 2. 数据绑定 (v-model)
```html
<input v-model="newTodo" />
```
- 双向数据绑定
- 输入框的值与数据同步
- 用户输入会自动更新数据

### 3. 事件处理 (@click, @keyup)
```html
<button @click="addTodo">添加</button>
<input @keyup.enter="addTodo" />
```
- `@click` 处理点击事件
- `@keyup.enter` 处理回车键
- 事件修饰符简化常见操作

### 4. 条件渲染 (v-show, v-if)
```html
<main v-show="todos.length">
<div v-show="!todos.length">
```
- `v-show` 控制元素显示/隐藏
- `v-if` 条件性渲染元素
- 根据数据状态动态显示内容

### 5. 列表渲染 (v-for)
```html
<li v-for="todo in filteredTodos" :key="todo.id">
```
- `v-for` 循环渲染列表
- `:key` 提供唯一标识符
- 提高渲染性能

### 6. 计算属性 (computed)
```javascript
const filteredTodos = computed(() => {
  // 根据filter状态过滤todos
})
```
- 基于其他数据计算得出
- 自动缓存，依赖不变时不重新计算
- 响应式更新

## 🔧 功能实现分析

### 添加待办事项
1. 用户在输入框输入内容
2. 按回车或点击添加按钮
3. 验证输入不为空
4. 创建新的todo对象
5. 添加到todos数组
6. 清空输入框

### 切换完成状态
1. 点击复选框
2. 触发toggleTodo方法
3. 找到对应的todo
4. 切换completed状态
5. UI自动更新样式

### 过滤显示
1. 点击过滤按钮
2. 更新filter状态
3. 计算属性重新计算
4. 列表自动更新显示

## 🎨 样式特点
- 使用scoped样式避免污染
- 响应式设计
- 悬停效果和过渡动画
- 清晰的视觉层次

## 🚀 实践练习

### 基础练习
1. 修改默认的待办事项
2. 改变应用的颜色主题
3. 添加更多的过滤选项

### 进阶练习
1. 添加编辑功能
2. 实现拖拽排序
3. 添加优先级标记
4. 实现本地存储

## 📖 Vue语法总结

| 语法 | 用途 | 示例 |
|------|------|------|
| `{{ }}` | 文本插值 | `{{ todo.text }}` |
| `v-model` | 双向绑定 | `v-model="newTodo"` |
| `@event` | 事件监听 | `@click="addTodo"` |
| `v-for` | 列表渲染 | `v-for="todo in todos"` |
| `v-show` | 条件显示 | `v-show="todos.length"` |
| `:class` | 动态类名 | `:class="{ active: filter === 'all' }"` |
| `ref()` | 响应式数据 | `const count = ref(0)` |
| `computed()` | 计算属性 | `const total = computed(() => ...)` |

## 🎯 下一步学习
完成这个项目后，您已经掌握了Vue的基础概念。接下来我们将学习：
- 组件化开发
- 组件通信 (props, emit)
- 插槽 (slots)
- 生命周期钩子

准备好继续学习项目2了吗？