实现⼀个简单的任务管理界⾯-Vue.js学习总结
虽然前⼏天看了下Vue.js的官⽅⽂档并照着上⾯的代码实现了⼀次，但是仍感觉很难上⼿，然并卵。⼀来是⾯对新的语法，总要有段适应期，⼆来也是我对JS的运⽤更多停留在操作DOM的阶段，关于⾯向对象的理解和运⽤还很浅显。
既然看不懂⽂档和书，索性去了相关的实例视频学习。这个任务管理实例，将⼀些Vue.js的基础语法贯穿其中，同时让我对⼀些功能实现的思路有了新的理解。
运⽤到的⼀些知识点如下：
1.Vue.js
2.0基础语法：
指令:v-on v-if v-model v-bind v-for
计算属性computed
watch 监控数据变化
directives⾃定义事件
...
2.html5新增API-⽤localStorage实现本地储存
3.监控hash值变化
实现界⾯
实现过程拆解：
⼀.添加任务
与直接操作DOM（原⽣JS可以⽤innerHTML和插⼊节点⽅法来实现）不同的是，⽤vue.js中的v-on指令就可以渲染列表，⽽关键是如何准备⽤于渲染的列表数据。x+
添加任务实现过程
⼆.管理任务
点击checkbox 完成任务
双击列表项 编辑任务
这两种需求的实现思路是⼀样的，即完成任务和编辑任务是两种不同的CSS样式，需加上不同的class。所以问题是，怎么判断何时加上对应的class。
对于完成任务 ：根据isChecked的真假来判断是否加上completed（class名）
完成任务实现过程
对于编辑任务：双击记录当前列表项，然后根据记录值来加editing
编辑任务实现过程
三.本地储存界⾯数据
初始状态
如果不去储存⽤户数据，⽤户每次来到页⾯都会看到空⽩页，这显然不满⾜⽤户任务管理的需求。这⾥⽤到的是HTML5-web Storage中的localStorage(将数据保存在客户端硬盘)，如果浏览器关闭了，数据仍然存在，下次访问⽹页仍可以继续使⽤。
向本地储存数据和取出数据的⽅法
运⽤watch监控list的数据变化，并在变化的同时储存数据
原生js和js的区别
储存数据
注意:
如果没有deep:true,watch只能监控到list对象中⼀层数据的变化
list对象
即，只能监控到⼀个列表项的添加与删除，⽽不能监控到⾥⾯的title与isChecked值的变化。
四.筛选任务
筛选任务实现
总结：
整个过程，我简单的体会是构建数据—处理数据—渲染数据的过程，围绕着数据（list数组）展开。
添加任务：
构建list数据：1.向list数组中push输⼊框的数据 2.添加isChecked布尔值⽤来表明列表项⽬前的           
              状态。
管理任务：记录不同事件引起的变化，⽤数据来表⽰。如点击checkbox引起isChecked变化，双击列表项记录当前item对象。过滤任务：不同的函数，写⼊不同的过滤条件，得到不同的List数据，即filteredList，然后渲染新的数据。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。