Vue2.x - TodoList案例

目录

案例介绍

效果展示

源码下载

功能实现

组件拆分

App功能分析

MyHeader功能分析

 MyContent功能分析

MyItem功能分析

MyFooter功能分析

---

案例介绍

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

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

效果展示

TodoList的效果图如下：

功能实现

组件拆分

App管理员组件，负责：

• 管理MyHeader、MyContent、MyFooter组件

MyHeader 头部组件，负责：

• 添加待办任务

MyContent 内容组件，负责：

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

MyItem 内容项组件，负责：

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

MyFooter 尾部组件，负责：

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

组件开发经验总结：

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

App功能分析

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

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

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

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

实现父子组件间通信。

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

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

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

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

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

MyHeader功能分析

 添加任务实现

 MyContent功能分析

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

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

MyItem功能分析

任务项的 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”完成双向数据绑定。但是官方不推荐这样做,原因如下：

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

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

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

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

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

MyFooter功能分析

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

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

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

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