5.4 范例：待办任务列表 -TypeScript和Vue从入门到精通(二)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(二)

### 5.4 范例：待办任务列表

在开发Web应用时，实现一个待办任务列表（Todo List）是一个既基础又极具教育意义的项目。它不仅能够帮助我们掌握Vue框架的核心概念，如组件化开发、数据绑定、事件处理等，还能让我们深入理解TypeScript在Vue项目中的应用，提升项目的可维护性和可扩展性。本章节将引导你使用TypeScript和Vue.js（假设使用Vue 3及其组合式API）从零开始构建一个功能完整的待办任务列表应用。

#### 5.4.1 项目初始化

首先，确保你的开发环境中已安装了Node.js、npm/yarn以及Vue CLI。我们将使用Vue CLI来快速搭建项目框架。

1. **创建Vue项目**：
   ```bash
   vue create todo-list-with-ts
   ```
   在创建过程中，选择“Manually select features”，并确保勾选了“TypeScript”、“Router”、“Vuex”（如果打算使用状态管理），以及“Linter / Formatter”（推荐ESLint + Prettier）等选项。

2. **进入项目目录**：
   ```bash
   cd todo-list-with-ts
   ```

3. **启动项目**：
   ```bash
   npm run serve
   ```

#### 5.4.2 设计组件结构

对于待办任务列表，我们可以将其拆分为几个主要组件：
- `TodoList.vue`：主组件，负责渲染整个待办列表和添加新任务的表单。
- `TodoItem.vue`：子组件，用于展示单个待办项，包括任务内容、完成状态以及删除按钮。

**TodoList.vue**

```vue
<template>
  <div>
    <h1>待办事项列表</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务" />
    <ul>
      <TodoItem
        v-for="(todo, index) in todos"
        :key="index"
        :todo="todo"
        @delete="handleDelete(index)"
        @toggle="handleToggle(index)"
      />
    </ul>
  </div>
</template>

export default defineComponent({
  name: 'TodoList',
  components: {
    TodoItem
  },
  setup() {
    const todos = ref<{ id: number; text: string; completed: boolean }[]>([]);
    const newTodo = ref('');

const handleDelete = (index: number) => {
      todos.value.splice(index, 1);
    };

const handleToggle = (index: number) => {
      todos.value[index].completed = !todos.value[index].completed;
    };

return { todos, newTodo, addTodo, handleDelete, handleToggle };
  }
});
</script>
```

**TodoItem.vue**

```vue
<template>
  <li :class="{ completed: todo.completed }">
    <input type="checkbox" :checked="todo.completed" @change="toggle" />
    {{ todo.text }}
    <button @click="deleteTodo">删除</button>
  </li>
</template>

export default defineComponent({
  name: 'TodoItem',
  props: {
    todo: {
      type: Object as PropType<{ id: number; text: string; completed: boolean }>,
      required: true
    }
  },
  emits: ['delete', 'toggle'],
  setup(props, { emit }) {
    const toggle = () => {
      emit('toggle', props.todo.id);
    };

const deleteTodo = () => {
      emit('delete', props.todo.id);
    };

return { toggle, deleteTodo };
  }
});
</script>

#### 5.4.3 样式与响应式布局

上述组件已具备基本功能，但为了更好的用户体验，我们可以添加一些CSS样式来美化界面。你可以在`TodoList.vue`或全局样式文件中添加CSS代码，比如使用Flexbox来布局输入框和列表，确保它们水平或垂直排列整齐。

#### 5.4.4 优化与扩展

1. **持久化存储**：
   为了保持用户数据即使在刷新页面后也不丢失，你可以考虑使用浏览器的localStorage或sessionStorage来存储待办事项。在Vuex中设置mutation和action来处理数据的存取。

2. **过滤与排序**：
   添加功能让用户能够按任务是否完成来过滤列表，或按任务创建时间排序。这通常涉及到在`TodoList.vue`中添加计算属性或使用methods来处理过滤逻辑。

3. **编辑功能**：
   允许用户编辑已存在的待办事项。这可以通过在`TodoItem`组件中添加一个编辑模式来实现，编辑模式下任务文本变为可编辑的输入框。

4. **错误处理与状态管理**：
   对于网络请求或复杂的状态变化，使用Vuex来管理状态，并在全局层面添加错误处理逻辑，以优雅地处理异常情况。

5. **响应式设计**：
   确保你的应用在不同设备（如手机、平板、桌面）上都能良好运行。使用媒体查询或CSS框架（如Bootstrap或Tailwind CSS）来帮助实现响应式布局。

6. **单元测试与集成测试**：
   编写单元测试来验证组件的行为，特别是事件处理和计算属性。使用Jest和Vue Test Utils等工具可以方便地进行测试。

通过本章节的学习，你应该能够掌握如何使用TypeScript和Vue.js来构建一个功能相对完整的待办任务列表应用。这个过程不仅加深了你对Vue框架和TypeScript的理解，还让你熟悉了组件化开发、事件处理、数据绑定等前端开发中常用的技术和模式。希望这个范例能够激发你进一步探索Vue和TypeScript的兴趣，并在实际项目中灵活运用所学知识。

该分类下的相关小册推荐：

Vue源码完全解析

Vue.js从入门到精通(一)

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(四)

TypeScript和Vue从入门到精通(一)

Vue3技术解密

TypeScript和Vue从入门到精通(五)

Vue.js从入门到精通(二)

Vue面试指南

TypeScript和Vue从入门到精通(三)

Vue.js从入门到精通(四)

Vue原理与源码解析