虽然前几天看了下Vue.js的官方文档并照着上面的代码实现了一次，但是仍感觉很难上手，然并卵。一来是面对新的语法，总要有段适应期，二来也是我对JS的运用更多停留在操作DOM的阶段，关于面向对象的理解和运用还很浅显。

既然看不懂文档和书，索性去找了相关的实例视频学习。这个任务管理实例，将一些Vue.js的基础语法贯穿其中，同时让我对一些功能实现的思路有了新的理解。

运用到的一些知识点如下：

1.Vue.js2.0基础语法：

指令:v-on v-if v-model v-bind v-for

计算属性computed

watch 监控数据变化

directives自定义事件

...

2.html5新增API-用localStorage实现本地储存

3.监控hash值变化

实现界面

代码地址：github.com/Designlotus/Vue.js-study

demo:designlotus.github.io/Vue.js-study/Task-management.html#unfinished

实现过程拆解：

一.添加任务

与直接操作DOM（原生JS可以用innerHTML和插入节点方法来实现）不同的是，用vue.js中的v-on指令就可以渲染列表，而关键是如何准备用于渲染的列表数据。x+

添加任务实现过程

二.管理任务

点击checkbox 完成任务

双击列表项 编辑任务

这两种需求的实现思路是一样的，即完成任务和编辑任务是两种不同的CSS样式，需加上不同的class。所以问题是，怎么判断何时加上对应的class。

对于完成任务 ：根据isChecked的真假来判断是否加上completed（class名）

完成任务实现过程

对于编辑任务:双击记录当前列表项，然后根据记录值来加editing

编辑任务实现过程

三.本地储存界面数据

初始状态

如果不去储存用户数据，用户每次来到页面都会看到空白页，这显然不满足用户任务管理的需求。这里用到的是HTML5-web Storage中的localStorage(将数据保存在客户端硬盘)，如果浏览器关闭了，数据仍然存在，下次访问网页仍可以继续使用。

向本地储存数据和取出数据的方法

运用watch监控list的数据变化，并在变化的同时储存数据

储存数据

注意:

如果没有deep:true,watch只能监控到list对象中一层数据的变化

list对象

即，只能监控到一个列表项的添加与删除，而不能监控到里面的title与isChecked值的变化。

四.筛选任务

筛选任务实现

总结：

整个过程，我简单的体会是构建数据—处理数据—渲染数据的过程，围绕着数据（list数组）展开。

添加任务：

构建list数据：1.向list数组中push输入框的数据 2.添加isChecked布尔值用来表明列表项目前的                          状态。

管理任务：记录不同事件引起的变化，用数据来表示。如点击checkbox引起isChecked变化，双击列表项记录当前item对象。

过滤任务：不同的函数，写入不同的过滤条件，得到不同的List数据，即filteredList,然后渲染新的数据。