vue3-03 todo-新增任务

**Vue3 Todo List: 新增任务**

在前面的章节中，我们已经完成了一个基本的Todo List应用，包括任务列表、添加新任务和删除任务等功能。然而，在现实世界中，用户往往需要能够编辑或修改已有的任务。这一章节将重点介绍如何新增任务到我们的Todo List应用中。

### 新增任务逻辑在 Todo List 应用中，新增任务的逻辑可以分为以下几个步骤：

1. **获取新任务信息**：用户需要输入新的任务名称和其他相关信息。
2. **验证任务信息**：确保任务名称不为空，并且其他信息也正确填写。
3. **保存新任务**：将新任务的信息存储到数据源中。

### Vue3 Todo List 应用代码我们使用 Vue3 的 Composition API 来构建我们的Todo List应用。下面是新增任务功能所需的相关代码：

javascript// src/components/TodoForm.vue<template>
 <form @submit.prevent="addTask">
 <input v-model="newTask" type="text" placeholder="输入新任务名称...">
 <button type="submit">添加</button>
 </form>
</template>

<script>
export default {
 data() {
 return {
 newTask: ''
 }
 },
 methods: {
 addTask() {
 // 验证任务信息 if (!this.newTask.trim()) {
 alert('请填写新任务名称!');
 return;
 }

 //保存新任务 this.$emit('add-task', { name: this.newTask, done: false });
 this.newTask = '';
 }
 }
}
</script>

javascript// src/components/TodoList.vue<template>
 <ul>
 <li v-for="(task, index) in tasks" :key="index">
 {{ task.name }}
 <button @click="editTask(index)">编辑</button>
 <button @click="deleteTask(index)">删除</button>
 </li>
 </ul>

 <!-- 新增任务表单 -->
 <TodoForm @add-task="addNewTask" />
</template>

<script>
import TodoForm from './TodoForm.vue';

export default {
 components: { TodoForm },
 data() {
 return {
 tasks: [
 { name: '任务1', done: false },
 { name: '任务2', done: true }
 ]
 };
 },
 methods: {
 addNewTask(newTask) {
 this.tasks.push({ ...newTask, id: Date.now() });
 },
 editTask(index) {
 // 编辑任务逻辑 console.log(`编辑任务 ${index}`);
 },
 deleteTask(index) {
 // 删除任务逻辑 console.log(`删除任务 ${index}`);
 }
 }
}
</script>

在上面的代码中，我们定义了一个 `TodoForm` 组件来处理新增任务的逻辑。这个组件包含一个输入框和一个添加按钮。当用户点击添加按钮时，会触发 `addTask` 方法，这个方法负责验证任务信息并保存新任务。

在 `TodoList` 组件中，我们使用了 `TodoForm` 组件来展示新增任务表单。我们还定义了 `addNewTask` 方法来处理来自 `TodoForm` 的事件，当用户添加新任务时，会触发这个方法，并将新任务的信息保存到数据源中。

### 总结在这一章节中，我们学习了如何在 Vue3 Todo List 应用中新增任务。我们使用 Vue3 的 Composition API 来构建我们的应用，并定义了一个 `TodoForm` 组件来处理新增任务的逻辑。在 `TodoList` 组件中，我们使用了 `TodoForm` 组件来展示新增任务表单，并定义了 `addNewTask` 方法来处理来自 `TodoForm` 的事件。