todomvc实现

主要分为以下几个功能:
1.数据列表显示及状态改变(v-for v-model),主要分为有、无数据两种。
2.添加任务
页面初始化时,文本框获得焦点
回车添加至任务列表(不允许有非空数据)(@keyup.enter push)
添加完成后清空文本框
3.点击箭头标记所有任务选中/未选中
4.任务项
切换任务完成状态(v-bind)
删除任务项(splice)
双击label进入编辑模式(设中间变量 默认为null v-model双向绑定)
5.编辑任务项
编辑文本框自动获取焦点
在编辑文本框后敲回车或者点文本框外区域失去焦点(keyup.enter 中间变量为null即可)
输入状态下按esc取消
6.显示所有未完成任务数
两种方案:(1)methods
(2)computed
具体用哪种,视情况而定。
7.清除所有已完成任务(用forEach遍历,但每遍历一次,删除已完成项,索引会发生变化,可以换种思路,保留未完成的项)
8.将数据持久化到localStorage
9.路由状态切换(onhashchange)

以上功能仅实现部分 所有功能会陆续实现

你可能感兴趣的:(todomvc实现)