TodoMVC是一个经典项目，让开发者快速实践到框架开发方式

http://todomvc.com

功能完备不冗余，多样实现引发深思

准备工作

• 从github克隆项目模板

git clone https://github.com/tastejs/todomvc-app-template.git

• 进入项目目录，安装依赖
  • cd 项目目录
  • npm install
• 安装Vue.js
  • npm install vue

需求分析

根据todoMVC网站的效果得到以下的分析：

• 事项列表展示
  • 有事项的情况
  • 没有事项的情况
• 状态栏展示
  • 个数展示
  • 单位展示
• 事项状态切换
  • 单个事项切换
  • 多个事项切换
• 事项新增
  • 内容检测
  • 回车新增
• 事项删除
  • 单个事项删除
  • 已完成事项删除（已完成事项按钮删除）
• 事项编辑
  • 触发编辑
  • 取消编辑（ESC键，还原到没有编辑的状态）
  • 保存编辑（回车和失去焦点都可以保存）
• 事项筛选
  • 点击切换显示类别
  • 更新渲染所有事项
• 事项数据持久化
  • 读取本地存储
  • 更新本地存储

事项列表展示

项目结构

注释掉原本的，保留自己需要用到的两个就行

app.js

• 引入vue.js文件，创建Vue实例设置挂载元素

• 在data中设置todos存储初始数据

  
  

考虑到项目结构，给section设置#app是最合适的

总之先是把data设置了

事项列表展示-实现

区分清楚每个区域

事项列表区域理解了逻辑了

要做的事有：

• v-for遍历li标签
• 类名绑定处理
• 复选框处理

• 内容展示

  
  
  设置事项视图
  
  

  解释一下代码的意思：
  li标签使用v-for进行多次渲染，设置key值为每一个事项都不同的id值，class设置为completed的true或者false，根据todo的completed来赋值
  类名toggle的input里，绑定v-model是为了双向绑定数据，勾选了之后数据也会更改

当todos里没有数据了，那么应该要注意，其他部分应该控制一下是否显示

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

  
  
  根据长度判断，使用v-show更适合频繁的切换

状态栏信息显示

• 需要实现的功能

  • 个数展示

    
    
    使用计算属性computed操作，完成状态是false的统计一次
    
    
    remaining就是统计的未完成的事项

• 单位处理

  
  
  是一个就不加s不表示复数
  
  
  传入参数item，记得加字符串的引号否则报错undefined

事项状态切换功能

• 需要实现的功能：
  • 单个事项切换
    单个事项切换已经通过v-model双向绑定解决了，这就是双向绑定的好处
  • 多个事项切换（分为两个功能）

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

      使用计算属性判断remaining是否为0，是0就返回true
      
      
      双向绑定类toggle-all的input，是true就勾选，不是就取消勾选

    • 全部切换选框操作
      设置 v-model 后，主动操作 toggle-all 相当于设置allDone 数据，这时需要给 allDone 设置 setter 来处理
      

事项新增功能

• 需要实现的功能为

  • 输入框内容绑定
    在data中设置newTodo用于存储数据，并且绑定给新增的输入框
    

    
    
    证明已经获得焦点了

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

    
    

事项删除

• 需要实现的功能

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

    
    

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

    
    操作后，事项列表中只保留未完成事项即可
    
    筛选出没有完成的事项
    
    
    绑定一下点击事件，函数为上述函数

事项编辑

• 需要实现的功能为：
  • 触发编辑
    双击时进行记录正在编辑的 todo，并保存原始 todo 内容。
    
    
    正在被编辑的 li 需要设置类名 editing
    
    优化后：给edit 双向绑定一个todo.title

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

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

• 保存编辑
  点击回车键或失去焦点时保存编辑，如果输入为空就是删除，回车也会失去焦点，避免重复触发事件，还要进行检测
  

事件筛选

• 需要实现的功能：
  • 记录筛选类别
  • 点击更改类别
    在 data 中声明数据存储当前显示的事项类别，并在点击筛选按钮时更改显示的事项类别
    
    
    
    
    设置用于筛选不同类别事项的函数，并统一存储
    
    
    设置计算属性处理 todoType，并设置给视图
    
    
    
    
    之前使用过的数据筛选函数也可以通过 filters 进行统一设置
    
    
    

事项数据持久化

保存当前的操作存在本地中，刷新之后还是能基于上次处理的结果继续操作

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

  
  
  JSON来操作，本地存储就不会转换为字符串

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

  
  

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

  
  

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