前端学习——Vue (Day2)

**前端学习——Vue (Day2)**### 前言在上一篇文章中，我们已经了解了 Vue 的基本概念、生命周期函数以及模板语法。今天我们将继续深入探索 Vue 的世界，学习如何使用 Vue 来构建一个实用的 Todo 列表应用。

### Todo 列表应用我们的 Todo 列表应用将包含以下功能：

* 添加新任务* 删除已完成的任务* 编辑任务名称和描述###依赖安装首先，我们需要在项目中安装必要的依赖。我们将使用 Vue CLI 来创建一个新的 Vue项目。

bashnpm install -g @vue/clivue create todo-appcd todo-app

接下来，我们需要安装 `@vue/composition-api` 和 `axios` 库。

bashnpm install --save @vue/composition-api axios

### Todo 列表组件现在我们可以开始编写我们的 Todo 列表组件了。首先，我们创建一个名为 `TodoList.vue` 的新文件，并在其中定义我们的组件。

html<template>
 <div>
 <!-- 添加新任务的输入框 -->
 <input type="text" v-model="newTask" @keyup.enter="addTask">
 <!-- Todo 列表 -->
 <ul>
 <li v-for="(task, index) in tasks" :key="index">
 {{ task.name }}
 <!-- 编辑按钮 -->
 <button @click="editTask(index)">编辑</button>
 <!-- 删除按钮 -->
 <button @click="deleteTask(index)">删除</button>
 </li>
 </ul>
 </div>
</template>

<script>
import { ref } from '@vue/composition-api';

export default {
 setup() {
 const newTask = ref('');
 const tasks = ref([
 { name: '任务1', description: '这是任务1的描述' },
 { name: '任务2', description: '这是任务2的描述' }
 ]);

 // 添加新任务 function addTask() {
 if (newTask.value) {
 tasks.value.push({ name: newTask.value, description: '' });
 newTask.value = '';
 }
 }

 // 编辑任务 function editTask(index) {
 const task = tasks.value[index];
 task.name = prompt('请输入新的名称');
 task.description = prompt('请输入新的描述');
 }

 // 删除任务 function deleteTask(index) {
 tasks.value.splice(index,1);
 }

 return { newTask, tasks, addTask, editTask, deleteTask };
 }
}
</script>

### Todo 列表应用现在我们可以开始编写我们的 Todo 列表应用了。首先，我们创建一个名为 `App.vue` 的新文件，并在其中定义我们的应用。

html<template>
 <div>
 <!-- Todo 列表组件 -->
 <TodoList />
 </div>
</template>

<script>
import TodoList from './components/TodoList.vue';

export default {
 components: { TodoList }
}
</script>

### 总结在本篇文章中，我们学习了如何使用 Vue 来构建一个实用的 Todo 列表应用。我们了解了如何定义组件、添加新任务、编辑任务和删除任务的功能。最后，我们将这些功能整合到一起，创建了一个完整的 Todo 列表应用。

### 后记本篇文章是前端学习——Vue (Day2) 的第二部分。如果你想继续学习 Vue 的更多内容，请查看我们的下一篇文章：前端学习——Vue (Day3)。