notes/todo-app/Vue学习指南-项目1.md

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

🎯 学习目标

通过这个待办事项应用，您将学习到Vue的核心概念：

• 响应式数据 (Reactivity)
• 数据绑定 (Data Binding)
• 事件处理 (Event Handling)
• 条件渲染 (Conditional Rendering)
• 列表渲染 (List Rendering)
• 计算属性 (Computed Properties)

📚 核心概念详解

1. 响应式数据 (ref)

const newTodo = ref('')
const todos = ref([...])

• ref() 创建响应式数据
• 当数据改变时，UI会自动更新
• 在模板中直接使用，在script中需要.value

2. 数据绑定 (v-model)

<input v-model="newTodo" />

• 双向数据绑定
• 输入框的值与数据同步
• 用户输入会自动更新数据

3. 事件处理 (@click, @keyup)

<button @click="addTodo">添加</button>
<input @keyup.enter="addTodo" />

• @click 处理点击事件
• @keyup.enter 处理回车键
• 事件修饰符简化常见操作

4. 条件渲染 (v-show, v-if)

<main v-show="todos.length">
<div v-show="!todos.length">

• v-show 控制元素显示/隐藏
• v-if 条件性渲染元素
• 根据数据状态动态显示内容

5. 列表渲染 (v-for)

<li v-for="todo in filteredTodos" :key="todo.id">

• v-for 循环渲染列表
• :key 提供唯一标识符
• 提高渲染性能

6. 计算属性 (computed)

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了吗？