--- theme: orange highlight: a11y-dark --- # 前言本文将带大家用VUE3实现TodoList的一个经典案例，也相当于是一个电子版的简易记事本！先来看效果图： ![52 (1).gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/42f6a31672b74f42be9f2c68f703cc78~tplv-k3u1fbpfcp-watermark.image?) 可以看到需要实现的功能如下： > 1. **新增**：输入任务按回车后，就会添加任务到列表。 > 2. **删除**：点击每个任务后的'X'，该任务就会在列表中被删除。 > 3. **统计**：统计剩余几个任务。 > 4. **清空**：点击右下角'clear completed',被选中的任务在该列表被清除不显示，并不是真正的删除。 > 5. **隐藏**：当没有任务时，最后一栏里的内容隐藏。 > 6. **状态切换**：当点击下面的'Completed Active All'任意按钮时，列表中显示相应的任务。 > 7. **全选按钮**：当选择此按钮时可以一键选中全部打“√”或者全部不选中。 # 思路准备 1. 由于App.vue最终还会被挂载到index.html中，所以在App.vue中编写主要代码。 2. 在App.vue中先搭建好框架：在template模板中写主要页面代码。首先先写死数据在上面，主要看页面效果是怎样的，好调整。 3. 模板页面主要分三部分：头部header、主要内容section、尾部footer。在header部分主要写标题和任务输入框；section部分主要写任务列表项；footer部分主要写按钮选择项和计数。 4. 写JS，并更换模板页面中的数据，用动态的数据代替。在setup()入口函数中写数据源和要实现功能的函数 # 正文 # 一、创建项目 1、首先通过`vue create xxx`创建好项目，其中‘xxx’我们以todolist命名 2、当我们以默认的方式创建项目后，需要删除原先的一些内容，目录结构主要如下：

其中components和assets文件夹下不要有任何东西。 **main.js**中初始化为如下：

**App.vue**中初始化如下：

# 二、编写前端页面在template模板中编写页面的代码和样式。 **1、编写页面主要框架**：在`class="todoapp"`的section标签下，主要分头部header、主体section、尾部footer三部分。在**header**中写标题和任务输入框，输入框前有全选按钮；在**section**中分多选框——给选中的项打“√”，`ul-li`标签下显示任务列表，包括任务名称和删除按钮;在**footer**标签中写剩余可做任务个数、已做任务按钮、未做任务按钮、全部任务按钮、清空已做任务按钮。 ``` ``` **2、编写template模板样式** 为了方便，在此项目我在npm库中引入了todomvc-app-css样式，链接为[todomvc-app-css - npm (npmjs.com)](https://www.npmjs.com/package/todomvc-app-css),在终端输入`npm i todomvc-app-css`进行下载，详细见于此网页进行查看。或者你们喜欢用自己的样式也行，不过用了这个下载的样式后，类名不能乱写，要用里面已经写好的类名样式才有效，并**在main.js中引入该css**。

最后下载后在**node_modules**文件夹下有**todomvc-app-css**文件夹，在此文件夹下**index.css**是主要实现样式。除此之外，在此css中我加了一些额外样式： ``` span.todo-choose{ display: inline-block; margin-top: -10px; } .todo-choose button.todo-do{ padding: 10px; /* width: 100%; height: 100%; */ } button.clear-completed.todo-do{ width: 90px; } ``` # 三、编写JS实现页面框架搭建好后，就是JS实现了！主要实现的功能,编写的函数主要如下： **1. 新增**：输入任务按回车后，就会添加任务到列表。 **思路：** 首先在输入框中绑定键盘输入事件`@keyup.enter="addTodo"`，以及双向绑定事件` v-model="newTodo"` ``` const addTodo = () => { if (!state.newTodo) return //若输入框输入的值为空不予加入列表中 state.filtertodo.push({ //加数据到筛选的数组中 id: state.filtertodo.length + 1, //每加入的数据加到列表末尾 title: state.newTodo, //加的内容为为输入的值 completed: false //默认新增的不勾选 }) state.todos.push({ //加数据到todos数组中 todos数组和filtertodo数组同步变化额外加todos数组是为了后面状态切换可以还原原数据，不必更改原数组 id: state.todos.length + 1, title: state.newTodo, completed: false }) state.newTodo = '' //每次回车加完后重新使输入框的值为空 } ``` **2.全选按钮**：点击全选按钮列表全部选中打√或者全部不选中 **思路：** 在全选按钮中双向绑定` v-model="allDone"` ``` const allDone = computed({ // 当计算属性传入一个对象时，可以对该值进行修改 get: function () { // 默认值获得值 return remaining.value === 0 //全选中则返回true }, set: function (value) { //修改值 state.filtertodo.forEach((todo) => { //遍历每个列表项把全选按钮的值赋值给每个列表项 todo.completed = value }) } }) ``` **3. 删除**：点击每个任务后的'X'，该任务就会在列表中被删除。 **思路：** 给"X"按钮绑定点击事件`@click="removeTodo(todo)"` ``` const removeTodo = (item) => { // state.todos.splice(idx, 1) state.filtertodo = state.todos.filter(todo => todo.id !== item.id) //把点击的该项过滤出去 state.todos = state.todos.filter(todo => todo.id !== item.id) } ``` **4. 统计**：统计剩余几个任务。 **思路：** 用`computed()`函数计算没有被选中的任务的个数 ``` //template {{ left }} left //js const remaining = computed( () => state.todos.filter(todo => !todo.completed).length ) const left=computed(()=>{ return remaining.value }) ``` **5. 清空**：点击右下角'`clear completed`',被选中的任务在该列表被清除不显示，并不是真正的删除。 **思路：** 给此按钮绑定点击事件`@click="removeTo"` ``` const removeTo=()=>{ state.filtertodo = state.todos.filter(todo=>!todo.completed) }//过滤掉已经完成的，返回还没有完成的 ``` **6. 隐藏**：当没有任务时，最后一栏里的内容隐藏。 **思路：** 给`footer`标签绑定`v-show` ```