这周更新了一些 TodoList，采用 vue.js 书写。
暂时没有考虑响应式，移动端显示效果不是很好，见谅。不过具体功能都没有问题。
目前已实现功能：
- 在 Input 内输入新项目，可按蓝色的“添加”按钮或回车键添加新数据。
- 单击项目文字，可以直接更改内容。
- 对号框、问号和垃圾桶图片分别显示成就栏数据、使用帮助和垃圾桶数据。
- 大部分按钮功能如文字所示。
- 绿色的还原按钮是将此数据存放至未完成栏目内保存。
- 红色的丢弃（清空）按钮是将一个或全部数据存放至垃圾桶内保存。
- 红色的彻底删除按钮是将垃圾桶内的数据彻底删除。
数据设计：
newTodoText：输入数据，获取 input 框内数据
todos[]：存放未完成的数据；
achieves[]：成就栏，存放已完成的数据；
trash[]：垃圾桶，存放丢弃的的数据；
showAchieves: 是否显示成就栏
showHelp：是否显示帮助
showTrash：是否显示垃圾桶
方法设计：（对周二写的方法进行了更改）
之前的主方法一共三个，对单个数据，三个数组调取不同的方法：（注：以下方法内 arr 参数传入的都是字符串）
achieve: function (index, value) { /*完成项目，此数据从未完成栏或垃圾桶捏删除，添加至成就栏内，“√”按钮（考虑误删情况）*/
this.todos.splice(index, 1);
this.$set(this.achieves, this.achieves.length ,{ title: value });
},
restore: function (index, value) { /*还原项目，此数据从原在数组删除，添加至未完成栏，“还原”按钮*/
this.achieves.splice(index, 1);
this.$set(this.todos, this.todos.length ,{ title: value });
},
abandon: function (index, value, arr) { /*丢弃项目，此数据从原在数组删除，添加至垃圾桶，“丢弃”按钮*/
if(arr=='todos') this.todos.splice(index, 1);
else if(arr=='achieves') this.achieves.splice(index, 1);
this.$set(this.trash, this.trash.length ,{ title: value });
},
但我们可以发现 achieve、restore、abandon 三个方法内，均有以下两个语句：
this.arr.splice(index, 1);
this.$set(this.arr, this.arr.length, {title : value});
那么可以抽取出来吗？根据 this 之后可以接变量的性质：
this[arr].splice(index, 1); //此时的arr为变量
将三个方法整理为一个方法：第一个参数是要删除数据的位置，第二个参数是删除的数据的值，第三个参数是 “要从哪个数组删除数据”的数组，第四个参数自然就是 “这个数据要去的” 数组。从哪里来，到哪里去。
changeDataArr: function (index, value, fromArr, toArr) {
this[fromArr].splice(index, 1);
this.$set(this[toArr], this[toArr].length, { title: value });
},
调用方法举例：
<button class="btn btn-success" @click="changeDataArr(index, achieve.title, 'achieves', 'todos')">还原</button>
那么对于多个数据呢？（目前多个则是全部），只考虑了未完成任务和垃圾桶的操作，但是如果成就栏也有对内部所有数据的操作需求呢？之前的两个方法：
achieveAll : function () { /*完成全部任务，此数据从未完成栏删除，添加至成就栏内，“清空”按钮*/
this.achieves = this.achieves.concat(this.todos);
this.todos= []
},
deleteAll : function () { /*删除垃圾桶内所有数据，“删除”按钮*/
this.trash = []
}
根据上一个思路，新写了一个方法，适用于任何对所有元素操作的情况。因为垃圾桶删除比较特殊，多加了一个 if 语句，最近读了《阿里巴巴 JAVA 开发手册》，单个语句也会加上花括号。题外，推荐这本书，可以直接下载 pdf版 学习，如果喜欢或者想支持作者再去买实体书，请注意 “手册” 两个字。
changeAllDataArr: function (fromArr, toArr) {
if(toArr!='') {
this[toArr] = this[toArr].concat(this[fromArr]);
}
this[fromArr] = [];
}
调用方法举例：
<button class="btn btn-success" @click="changeAllDataArr('todos','achieves')">全完成</button>
最后我的方法只有三个：
/*获取新数据，“添加”按钮*/
addNewTodo: function () {
this.todos.push({ title: this.newTodoText })
},
/*对单个元素操作*/
changeDataArr: function (index, value, fromArr, toArr) {
this[fromArr].splice(index, 1);
this.$set(this[toArr], this[toArr].length, { title: value });
},
/*对所有元素操作*/
changeAllDataArr: function (fromArr, toArr) {
if(toArr!='') {
this[toArr] = this[toArr].concat(this[fromArr]);
}
this[fromArr] = [];
}
更改后的两个方法，不仅代码量减少，而且适用范围增大。最明显的是，在 html 内绑定方法时，可以明确的知道，数据的变动，不用考虑该调用什么方法。
后续设想更新：
- 目前页面设计不够好，需要学习如何美化，重新设计样式。比如网页添加导航栏，可以点开成就栏、帮助、垃圾桶、关注我、留言等等小栏目。
- 组件化。比如小栏目主体大致是一样的，只是一些内容的更改，那么就可以创建模板或组件，重新渲染，html 的代码量会减少很多。不过目前 template 还没有掌握。
- 增加多选功能。
- 浏览器缓存数据，即下一次打开页面数据也还存在，除非清空缓存。如果可以，添加账号功能，将数据保存在云端。
最后吐槽一下周二发的 GIF 图竟然不动。。