vue学习之做事列表todoList

这次用vue实现简单的做事列表单。包含事件添加、统计、删除、标记（已完成/未完成）。

做事列表

一、功能实现

做事列表也是通过v-for循环渲染出的列表效果，根据data中plans数据获取到的，也可以通过axios获取json数据。

（1）事情获取和状态分类

首先先介绍如何将所有数据分成：全部任务、已完成、未完成。这里刚开始定义当isSekected为true时就是完成状态。这些分类后的数据列表是通过计算的到的，所以采用computed计算属性来实现。

再者就是，怎么通过点击不同的链接显示不同状态的数据？这里使用hash值来区分。即通过在网址后面加哈希值来显示不同条件的结果。然后再computed中我们根据不同链接的hash值，来计算不同的状态数据。

html-hash

在vue实例中，定义computed中的属性filterPlans，实现根据不同的hash值返回不同的显示数据。（finish表示被选中的，unfinish表示没有选中的）（只要理清逻辑，实现很简单^.^）

然后在v-for中遍历的数据改成filterPlans即可。

（2）未完成统计

跟上面的原理差不多，也是根据computed计算属性计算得到count的值，通过{{}}渲染在页面上。

这里要记住一个原则：只要是要显示计算属性的值，就写在computed里面。

漏了一点：前面讲到通过hash值显示不同的状态数据，实现动态刷新的效果。但是在页面初始化加载，即created函数中，需要监控hash的变化，即如果页面已经有hash值了，重新刷新页面也要获取hash值。并且将hash值的变化映射到数据内。（hash值只需要后面的名字，不用‘/#’这两个字符）

只有这样才能将窗口里面的hash值成功传到this.hash中，才能真正显示不同的状态数据，否则点击那几个标签是没有任何反应的。下面代码添加到created()中：

this.hash = window.location.hash.slice(2) ||"all"; // 如果没有触发，也需要初始化一个hash值

window.addEventListener('hashchange',()=>{

this.hash = window.location.hash.slice(2);

},false)// 这里默认就是false

（3）添加和删除

这个很简单，就创建两个methods：remove和add，分别使用filter和push数组方法改变数组的元素。

添加和删除

二、完善

（1）为了让做事列表的状态有区分，更美观，需要到选择该条事情标记为已完成时改变它的显示效果。如：

状态区分

这里使用class动态绑定实现，即当isSelected为true时添加相应的class

:class="{del:one.isSelected}"，one是指循环中的某一条数据，del是自定义的css样式。

关于class和style的用法，更详细的可以参照vue官方教程-class&style

（2）允许修改添加后的事件

编辑模式

即双击该行进入可编辑状态，失去焦点或回车回到原来的模式并显示修改后的结果。

这种情况，由于当前双击的一条li和其他有区分，可以事先写两个input，使用v-show，根据不同的条件显示不同的input，当双击的某项时，将该项one传给当前项cur，如果one==cur，则根据自定义的指令v-focus，实现让输入框获取焦点。如果li失去焦点或者回车，则执行cancel将cur=''，这样满足one！=cur，显示上面的input。

自定义指令需要定义在directtives里面：

editor和cancel方法实现：

（3）还需要一个功能：当数据发生变化时实时将数据传到本地存储localStorage，这样关掉之后再打开仍会显示之前的结果。

①页面初加载时，如果本地localStorage有数据用他里面存的，如果没有则用默认的。

this.plans = JSON.parse(localStorage.getItem('data')) ||this.plans;

②有了获取，当然要时刻监控数据变化并且存到本地存储中setItem。

watch只能监控一层的数据变化，即数据plans中如果数组添加一个对象，则能监控到，但是若只是改变数组中某个对象的val则不会被监控到，比如对某条进行修改。如果是要进行深度监控，我们需要把plans变成一个对象。

localStorage默认存的是字符串，getItem--用JSON.parse和setItem--用JSON.stringify进行数据类型转换

watch:{

    plans:{

handler(){

           localStorage.setItem('data',JSON.stringify(this.plans));

        },deep:true

    }

},

描述不准确或者错误的地方请多多指教！！！

完整代码参考参考vue-demo中的newTodo.html和newTodo.js