Vue.js之todoList案例详解

本文详细介绍利用Vue.js实现todoList功能以及模块化方法的封装。todoList结合了vue的v-for、v-bing、v-on、v-if等等的指令，方便新手玩家入门vue的小练习。参考来源于IT营的大地老师关于Vue教程，需要的可留言邮箱，我会直接发百度云链接，无偿。

todoList功能介绍： 

 

 

1. 如图，文本框输入计划事件，回车之后，事件会出现在“未完成”区域中，文本框清空。
2. 点击事件前对应的复选框，事件会移至“已结束”区域中，反之取消复选框勾选，事件会返回至“未完成”区域中。
3. 点击删除按钮，对应事件将会被删除。
4. 刷新页面，数据不会清空（本地存储）。
5. 点击“清除本地存储”按钮，刷新页面，数据将会清空 

 下面是目录以及代码：

App.vue 

封装的storage.js

/**
 * 封装本地存储的方法 模块化文件
 */
var storage={
  set:function (key,val) {
    localStorage.setItem(key,JSON.stringify(val));
  },
  get:function (key) {
    return JSON.parse(localStorage.getItem(key));
  },
  remove:function (key) {
    localStorage.removeItem(key);
  }
}
//注意需要暴露出去
export default storage;

有几个点： 

1. data里面的doWhat需要与文本框进行双向数据绑定。
2. 通过监听键盘的回车键，出发add方法，将输入的事件push进todoList中。其中，监听回车键是通过获取到keyCode判断是否为13来实现；push到todoList中的是一个对象，有things和isOver两个key值，其中things是事件内容，isOver是布尔类型，判断事件是否完成。
3. 事件前面的checkbox需要与判断状态的变量（即data里面todoList的isOver）进行双向数据绑定，点击或取消勾选将会改变isOver的布尔值，通过此布尔值可以令事件有依据的出现在相应的区域中（未完成还是已结束）。未完成和已结束下的区域是两个不同的ui>li，利用v-for判断isOver的布尔值，从而对todoList中的数据进行渲染。
4. 关于数据本地存储，通过localStorage.setItem()和localStorage.getItem()将todoList进行存储和获取。其中，当用户进行增加事件、删除事件、改变事件状态这三种操作时，均需要执行localStorage.setItem()。而获取本地存储的localStorage.getItem()则需要在mounted()生命周期函数中执行，实现打开网页时进行数据请求。
5. 封装方法。在App.vue同级目录下新建model文件夹，在此文件夹中新建js，对本地存储中数据的设置、获取、删除三个方法进行封装，最后一行别忘记export default XXX;
6. 注意数据存储时的类型，存时需要将数据转化成JSON字符串，获取时需要将数据转回JSON对象。
7. 在取到localStorage中的list时，需要先判断是否存在，存在才能进行下一步的赋值给list[]数组，否则当list不存在的时候赋值会出错误。

以上。