虽然前几天看了下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,然后渲染新的数据。
网友评论