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来快速搭建项目框架。

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

5.4.2 设计组件结构

对于待办任务列表，我们可以将其拆分为几个主要组件：

TodoList.vue：主组件，负责渲染整个待办列表和添加新任务的表单。
TodoItem.vue：子组件，用于展示单个待办项，包括任务内容、完成状态以及删除按钮。

TodoList.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>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import TodoItem from './TodoItem.vue';
export default defineComponent({
  name: 'TodoList',
  components: {
    TodoItem
  },
  setup() {
    const todos = ref<{ id: number; text: string; completed: boolean }[]>([]);
    const newTodo = ref('');
    const addTodo = () => {
      if (newTodo.value.trim() !== '') {
        todos.value.push({ id: todos.value.length + 1, text: newTodo.value, completed: false });
        newTodo.value = '';
      }
    };
    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

<template>
  <li :class="{ completed: todo.completed }">
    <input type="checkbox" :checked="todo.completed" @change="toggle" />
    {{ todo.text }}
    <button @click="deleteTodo">删除</button>
  </li>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
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>
<style scoped>
.completed {
  text-decoration: line-through;
  color: #ccc;
}
</style>

5.4.3 样式与响应式布局

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

5.4.4 优化与扩展

持久化存储：
为了保持用户数据即使在刷新页面后也不丢失，你可以考虑使用浏览器的localStorage或sessionStorage来存储待办事项。在Vuex中设置mutation和action来处理数据的存取。
过滤与排序：
添加功能让用户能够按任务是否完成来过滤列表，或按任务创建时间排序。这通常涉及到在TodoList.vue中添加计算属性或使用methods来处理过滤逻辑。
编辑功能：
允许用户编辑已存在的待办事项。这可以通过在TodoItem组件中添加一个编辑模式来实现，编辑模式下任务文本变为可编辑的输入框。
错误处理与状态管理：
对于网络请求或复杂的状态变化，使用Vuex来管理状态，并在全局层面添加错误处理逻辑，以优雅地处理异常情况。
响应式设计：
确保你的应用在不同设备（如手机、平板、桌面）上都能良好运行。使用媒体查询或CSS框架（如Bootstrap或Tailwind CSS）来帮助实现响应式布局。
单元测试与集成测试：
编写单元测试来验证组件的行为，特别是事件处理和计算属性。使用Jest和Vue Test Utils等工具可以方便地进行测试。

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