Vue2.x - TodoList案例

傷城~ 2023-09-28 09:52 122阅读 0赞

**目录**

案例介绍

效果展示

源码下载

功能实现

组件拆分

App功能分析

MyHeader功能分析

MyContent功能分析

MyItem功能分析

MyFooter功能分析

--------------------

# 案例介绍 #

TodoList是一个很好的用于练习Vue组件化编程的案例，在该案例中，我们主要可以复习到：

*  Vue核心语法
 *  组件化编程模式
 *  单文件组件
 *  父子组件间通信
 *  全局事件总线
 *  组件样式
 *  transition内置组件的使用
 *  $nextTick
 *  localStorage浏览器本地存储

# 效果展示 #

TodoList的效果图如下：

![7d38e66a7839464f98b7205220ce96f0.gif][]

# 源码下载 #

源码下载地址

[GitHub - qwx427219/todos: todo list![icon-default.png_t_M4AD][]https://github.com/qwx427219/todos.git][GitHub - qwx427219_todos_ todo list_icon-default.png_t_M4AD_https_github.com_qwx427219_todos.git]使用说明，请看源码中README.md

# 功能实现 #

### 组件拆分 ###

![6c50af2f859043c8b9fd7bfed5908e62.png][]

App管理员组件，负责：

*  管理MyHeader、MyContent、MyFooter组件

MyHeader 头部组件，负责：

*  添加待办任务

MyContent 内容组件，负责：

*  展示待办任务
 *  修改待办任务信息（名称，完成状态）
 *  删除待办任务

MyItem 内容项组件，负责：

*  MyContent组件中每一个任务项的功能实现

MyFooter 尾部组件，负责：

*  展示 已完成待办任务数 / 待办任务总数
 *  统一修改所有待办任务的完成状态
 *  清除已完成的所有待办任务

组件开发经验总结：

最好先在App组件template标签中，按照组件化拆分要求，搭建好整体框架，并给框架中各组件设计好样式。当整体结构和样式设计好后，再进行拆分。

### App功能分析 ###

MyHeader、MyContent、MyFooter这三个组件应该操作同一个数据源。

所以在没有学习Vuex之前，共享数据源最好是放在它们的共同父组件App上。

这样MyHeader、MyContent、MyFooter想要操作数据源，其实就是简单的父子组件通信，此时可以选择：

*  组件标签自定义属性 + props配置项
 *  自定义事件
 *  全局事件总线

实现父子组件间通信。

从前面各组件功能介绍可以分析出：

MyContent和MyFooter都是需要展示数据源的信息，对于这种展示需求，我们可以选择最简单的【组件标签自定义属性 + props配置项】通信方式

![03d567a8708d473b9a5a9372bc076035.png][]

对于需要子组件修改数据源的操作，我们可以使用 自定义事件 或者 全局事件总线。

这里为了App组件视图模板的简单明了，推荐使用全局事件总线。

![c5ec9ab439264cfc9577987c5657ae2a.png][]

![3660f8922b4e4ced94dbcc56cdd5cb9d.png][]

另外，数据源可以持久化在浏览器的localStorage中，当数据源被修改后，再重新将数据写回localStorage中。这里使用watch深度监听的方式监听数据源的修改。

![505e998731b94878a70b301681dade92.png][]

### MyHeader功能分析 ###

![568e956e49b9447696bf287b809f06b2.png][]

添加任务实现

### MyContent功能分析 ###

![b261a65f28094c50ba7e7163ff16b1de.png][]

MyContent中如果有MyItem，即数据源存在任务时，则展示任务，且当任务项对应的DOM增加或删除时，会有动画效果，因为MyItem被transition-group组件包裹，这里动画效果使用的是第三方动画库animate.css，transition-group使用的是自定义样式类名 enter-active-class和leave-active-class。

MyContent中如果没有MyItem，即数据源不存在任务时，则展示提示信息“暂无待办任务”

### MyItem功能分析 ###

![ae39602c62d54b72b934be1d9f102249.png][]

任务项的 checkbox框具有展示功能 和 修改功能。

展示功能 即 将input:checked属性值和 todo.done绑定。

修改功能 即 @change="changeTodoDone" ，当input:checked发生改变时，就触发changeTodoDone方法，而该方法又触发了全局事件总线上的注册的事件changeTodo。

这里需要注意的是，ESLint不允许Object对象直接沿着原型链调用Object.prototype上的方法，如hasOwnProperty，强行使用会报错

> Do not access Object.prototype method 'hasOwnProperty' from target object. eslint(no-prototype-builtins)

只能使用call借用，真是无语了。

另外需要注意的是：props配置接受的数据，如todo，是只读的，不允许修改的。但是Vue2.x中props配置如果接受的是 对象，则修改对象的属性不会 触发只读报错。

此时我们完全可以用 v-model=“todo.done”完成双向数据绑定。但是官方不推荐这样做,原因如下：

![5bb2379e34eb4d5590d7b1907951bbb2.png][]

![6fb1721c773c4365bc66f1e6d7d12863.png][]

任务项的任务名称 既可以展示，也可以修改。双击任务名称，既可以进入修改模式，修改模式就是一个输入框，输入框默认value为展示时的内容。

修改完成后，可以在input聚焦情况下按enter键完成数据源数据修改，或者让input失去焦点，也可以完成数据源数据修改。

控制任务名称的展示模式和修改模式的切换的isShow标识，虽然是组件实例的响应式属性，但是changeShowStatus中isShow状态的修改不会立即引起页面重新渲染，所以修改模式下的输入框不会被同步展示到网页，所以输入框的聚焦要等待页面重新渲染后执行，这里使用$nextTick。

![8d2715cb78ed4642a02b34f354ca445a.png][]

任务项的删除按钮，默认是不显示的，只有鼠标经过任务项时才显示。

点击任务项的删除按钮，会将数据源中该任务彻底删除。

### MyFooter功能分析 ###

### ![09f8c6b4e0674e50b0fa3bef342142b4.png][] ###

统计功能，即统计已完成的任务数，和总共的任务数。总共的任务数就是简单的todos.length，即数据源数组的长度。已完成的任务数，使用的Array.prototype.reduce条件统计方法。这个方法还是要多用用，因为它的语法设计优点绕。

![a18694ec859945fb8a46605f17175665.png][]

MyFooter中的checkbox多选框，功能是：

*  展示功能：如果所有任务项都完成了，则MyFooter的多选框自动勾选，否则自动不勾选
 *  修改功能： 如果勾选MyFooter的多选框，则所有任务项都改为完成态，如果去勾MyFooter的多选框，则所有任务项都改为未完成态。

![2ba561dd79e2479bb489c6a1eee330a5.png][]

清空已完成，点击则清除已完成状态的任务项。

[7d38e66a7839464f98b7205220ce96f0.gif]: https://img-blog.csdnimg.cn/7d38e66a7839464f98b7205220ce96f0.gif
[icon-default.png_t_M4AD]: https://csdnimg.cn/release/blog_editor_html/release2.1.3/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M4AD
[GitHub - qwx427219_todos_ todo list_icon-default.png_t_M4AD_https_github.com_qwx427219_todos.git]: https://github.com/qwx427219/todos.git
[6c50af2f859043c8b9fd7bfed5908e62.png]: https://img-blog.csdnimg.cn/6c50af2f859043c8b9fd7bfed5908e62.png
[03d567a8708d473b9a5a9372bc076035.png]: https://img-blog.csdnimg.cn/03d567a8708d473b9a5a9372bc076035.png
[c5ec9ab439264cfc9577987c5657ae2a.png]: https://img-blog.csdnimg.cn/c5ec9ab439264cfc9577987c5657ae2a.png
[3660f8922b4e4ced94dbcc56cdd5cb9d.png]: https://img-blog.csdnimg.cn/3660f8922b4e4ced94dbcc56cdd5cb9d.png
[505e998731b94878a70b301681dade92.png]: https://img-blog.csdnimg.cn/505e998731b94878a70b301681dade92.png
[568e956e49b9447696bf287b809f06b2.png]: https://img-blog.csdnimg.cn/568e956e49b9447696bf287b809f06b2.png
[b261a65f28094c50ba7e7163ff16b1de.png]: https://img-blog.csdnimg.cn/b261a65f28094c50ba7e7163ff16b1de.png
[ae39602c62d54b72b934be1d9f102249.png]: https://img-blog.csdnimg.cn/ae39602c62d54b72b934be1d9f102249.png
[5bb2379e34eb4d5590d7b1907951bbb2.png]: https://img-blog.csdnimg.cn/5bb2379e34eb4d5590d7b1907951bbb2.png
[6fb1721c773c4365bc66f1e6d7d12863.png]: https://img-blog.csdnimg.cn/6fb1721c773c4365bc66f1e6d7d12863.png
[8d2715cb78ed4642a02b34f354ca445a.png]: https://img-blog.csdnimg.cn/8d2715cb78ed4642a02b34f354ca445a.png
[09f8c6b4e0674e50b0fa3bef342142b4.png]: https://img-blog.csdnimg.cn/09f8c6b4e0674e50b0fa3bef342142b4.png
[a18694ec859945fb8a46605f17175665.png]: https://img-blog.csdnimg.cn/a18694ec859945fb8a46605f17175665.png
[2ba561dd79e2479bb489c6a1eee330a5.png]: https://img-blog.csdnimg.cn/2ba561dd79e2479bb489c6a1eee330a5.png