130 lines
3.1 KiB
Markdown
130 lines
3.1 KiB
Markdown
# 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了吗？
|