1.首先我看到本身的UI显示就说明了它是一个搜索框，猜想具备了搜索的功能。

可以搜索到什么东西，显示我们可以搜索什么东西，主要看搜索词典也就是数据库里面存储了什么东西让我们搜，有没有链接第三方搜索库也是我接下来需要去探索的。

2.vue.js是什么

 Vue.js是一个构建数据驱动的web 界面的渐进式框架。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与单文件组件和Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 [1] 。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

3.实际使用

3.1  首先推翻上面的猜想，并不是作为一个搜索引擎，里面有什么Vue.js相关的东西。并作为任务清单的功能表现出来。

3.2  尝试输入一个字符a，按下enter键，会出现一个类似下拉框的东西，将刚才输入的字符换成一个待办事项的条目来显示。

图1 图2

可以看到，输入字符a并确认后，页面会出现7个功能选项。

为了更好地体验功能，再增加一些待办清单内容

3.3  单击任务a后，任务a会变模糊，并出现一个勾，好像意味着任务完成，并会出现clear completed的选项，点击后，任务a会消失，从这可以推断出completed的功能，就是查看已经完成的任务的意思。

图3

3.4 点击completed查看这个功能选项的作用

图4

按图4所示。按下completed后果然发现可以发现只有任务a显示，并且是显示完成的状态，未完成的没有在这里显示。

3.5 点击Actice，从字面意思理解就是活跃的意思，点击后，果然只剩下还没完成的任务。如图5所示。

图5

3.5 点击all选项，就是查看未完成和完成的任务，如图6所示。

图6

3.6 左下角的字符作用：提醒还有多少任务留下，如图7所示。

图7

3.7 红叉的作用：点击后就删除当前任务。如图8和图9所示。

图8 图9

3.8 输入框下拉箭头的作用，如图10所示。

图10

可以发现点击后，任务全部完成了，可以说是一个很人性化的设计，可以一键完成所有任务。

3.9 输入框可以输入的内容大小没有限制，可以随便输入，如图11所示。

图11

4.总结

    可以看出这个todo任务清单网页版，具有可以增加任务，删除任务，完成任务，查看任务状态，修改任务状态的功能，可以说将任务各种状态都有涉及，实现了基本任务清单软件所必要的功能。但是功能还是比较局限。

5.功能完善建议

我本来也使用过几个任务清单提醒软件，结合todo任务清单，我提出的功能完善建议如下

1.增加时间记录，时间安排，具体到几个小时，或者几天。

2.增加提醒功能，当某一个任务要开始的时间到了，要提醒用户要执行该任务了。

3.增加音效提醒。

4.增加一些励志标语，激励完成任务。

5.增加任务倒计时功能，将某一个任务要完成的时间换成分钟进行倒计时，会激励用户更加加快速度完成任务。