todomvc任务清单用户使用流程模拟和功能模块划分

1.用户使用流程

为了更好说明用户使用任务清单的过程，我这里模拟了一个用户叫小明。

小明是一个程序员，当天回到公司上班。

接到上司的命令，要在上午完成自动化网站需要分析，11点开会，下午修改昨天程序提出的bug。

1.首先，小明想要使用任务清单，安排一下今天的任务，于是他打开一个网站：todomvc.com。点击进入后再点击vue.js版本的任务清单页面。

2.小明按时间顺序依次将自己当天需要完成的任务再输入框依次输入。

image.png

3.一个早上过去了，小明按任务清单的顺序，按时将任务完成，于是小明将任务单击修改成完成状态。

image.png

4.小明想看一下自己完成的任务，点击completed按钮查看，看到自己早上完成的任务。

image.png

5.闲着没事干的小明点击active按钮，查看自己还有那些没有完成的任务

image.png

6.看完未完成的任务后，小明想看一下自己总体的任务状态，操纵鼠标点击all按钮

image.png

7.突然，小明接到老板的电话，叫小明不要去开会了，改去陪客户聊需求，于是小明修改了任务内容

image.png

8.不知不觉一天过去了，小明再次打开网页，看一下任务状态，发现任务都完成了，于是小明点击下拉框，将任务都变成完成状态

image.png

9.小明看到左下角文字和任务的颜色变化和有一个勾的提示显示三个任务都完成了，想结束自己完美的一天，这时小明可以选择一个个单击任务后方的红叉或者点击clear completed按钮。

image.png

看到这幅图片，小明知道该下班了。

2.功能模块划分

• 增加功能：在输入框输入后按下enter键增加todo项。

• 修改功能：双击任务修改

• 删除功能：单击红叉或点击clear completed

• 查看功能：点击all或者active或completed