TodoList

案例概述：用户在输入框中输入有效内容（非空且与已有内容不重复）并按下回车键，新输入的内容将被以定义好的动画添加至列表项最前方；每个列表项均有鼠标悬浮效果，当鼠标经过列表项时，当前列表项背景变为灰色并在最右边显示删除和编辑按钮，当点击删除按钮时，当前项将被删除并以定义好的动画消失，当点击编辑按钮时，用户可修改当前项的信息；当用户勾选或取消列表项时，底部会统计已完成事项的数量和总数，当用户点击「清除已完成任务」按钮时，所有已完成的列表项均被清除。

功能模块

• 添加事项（非空且不重复、动画效果）
• 删除事项（动画效果）
• 编辑事项（新内容非空且不重复）
• 选中事项，并统计已完成/总数
• 全选事项
• 清除已完成事项

效果图

组件拆分

• App.vue：掌管所有组件；
• MyHeader.vue：接收用户输入的有效内容（非空且不重复）并将其添加至列表项中；
• List.vue：显示用户数据；
  • Item.vue：显示事项
    • 根据是否勾选当前项实时更新底部已完成的数量；
    • 具有鼠标滑过效果，当滑过当前项时，背景变为灰色，并在最右边显示编辑和删除按钮；
      • 点击删除按钮，当前项基于已定义的动画消失；
      • 点击编辑按钮，当前项变为可编辑状态，当失去焦点时，重新显示新内容（非空且不重复）；
• MyFooter.vue：显示已完成项的数量和总数，当点击「清除已完成任务」按钮后，可以清除已完成的所有任务；

版本改进

• src_v1：添加本地存储功能
• src_v2：使用自定义事件（子 ➡️ 父）完成子组件和父组件之间的通信：原本写法（父给子一个函数，子在适当的时候调用并返回参数）
• src_v3：当App.vue和Item.vue通信时，需要借助List.vue逐层传递数据，此时我们可以使用全局事件总线
• src_v4：使用消息订阅与发布重写App.vue与Item.vue之间的通信方式,并添加Item项的编辑功能（自动获取焦点 - nextTick）
• src_v5：添加Item项的动画效果并对添加项是否重复进行校验

外部库

• nanoid：生成唯一标识
• pubsub：发布订阅消息
• 定义动画：animate.css

快速启动

Project setup

npm install

Compiles and hot-reloads for development

npm run serve