这次用vue实现简单的做事列表单。包含事件添加、统计、删除、标记（已完成/未完成）。
一、功能实现
做事列表也是通过v-for循环渲染出的列表效果，根据data中plans数据获取到的，也可以通过axios获取json数据。
（1）事情获取和状态分类
首先先介绍如何将所有数据分成：全部任务、已完成、未完成。这里刚开始定义当isSekected为true时就是完成状态。这些分类后的数据列表是通过计算的到的，所以采用computed计算属性来实现。
再者就是，怎么通过点击不同的链接显示不同状态的数据？这里使用hash值来区分。即通过在网址后面加哈希值来显示不同条件的结果。然后再computed中我们根据不同链接的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