Vue.js - 综合案例 TodoMVC

TodoMVC 是一个经典项目，让开发者快速实践到框架开发方式。
官网地址：http://todomvc.com/

准备工作

• 从 github 克隆项目模板。

  • git clone https://github.com/tastejs/todomvc-app-template.git
  • 加速连接：git clone https://github.com.cnpmjs.org/tastejs/todomvc-app-template.git

• 进入项目目录，安装项目依赖

  • cd 项目目录
  • npm install

• 安装 Vue.js

  • npm install vue

需求分析

事项列表展示

引入 vue.js 文件，创建 Vue 实例设置挂载元素。 在 data 中设置 todos 存储初始数据。

设置事项视图：

设置有无事项时的显示状态：

状态栏信息展示

个数展示：

单位处理：

事项状态切换

单个事项切换通过 v-model 的设置已经实现了，多个事项切换分为两部分功能： 单个事项操作、全部切换选框操作。

单个事项切换会导致 toggle-all 状态变化，我们可以通过 remaining 来进行判断：

设置 v-model 后，主动操作 toggle-all 相当于设置 allDone 数据，这时需要给 allDone 设置 setter 来处理。

事项新增

需要实现的功能为： 输入框内容绑定、回车新增事项。

在 data 中设置 newTodo 用于存储数据，并绑定给新增输入框。

输入框回车时检测内容，并根据输入内容新增事项到 todos。

事项删除

需要实现的功能为：单个事项删除、已完成事项删除。

点击单个事项中的删除按钮时，删除 todos 中对应的对象数据。

已完成事项按钮的需要在具有已完成事项时显示。

操作后，事项列表中只保留未完成事项即可。

事项编辑

需要实现的功能为： 触发编辑、取消编辑、保存编辑。

双击时进行记录正在编辑的 todo，并保存原始 todo 内容。

正在被编辑的 li 需要设置类名 editing。

触发编辑后，输入框无法自动获取焦点，可通过自定义指令实现。

点击 esc 键取消编辑，还原事项内容与状态。

点击回车键或失去焦点时保存编辑。

当编辑内容为空时保存，应当删除 todo 。

回车也会失去焦点，为避免重复触发事件，需进行检测。

事项筛选

需要实现的功能为： 记录筛选类别、点击更改类别。

在 data 中声明数据存储当前显示的事项类别，并在点击筛选按 钮时更改显示的事项类别：

设置用于筛选不同类别事项的函数，并统一存储。

设置计算属性处理 todoType，并设置给视图。

之前使用过的数据筛选函数也可以通过 filters 进行统一设置。

事项数据持久化

需要实现的功能为： 获取本地存储、更新本地存储。

封装函数，用于进行本地存储数据读取。

将事项数据更改为本地存储数据。

封装本地存储的更新功能。

由于多种事项操作都需要更新本地存储，单个设置十分繁琐，可以通过侦听器统一设置。