基于Vue的todolist———最简单的代办事件列表

基于Vue的toDoList———最简单的代办事件列表

github网址: toDoList-Vue

Vue-toDolist分析：

1. 做到刷新页面不会丢失数据，因此我们的数据需要保存至本地localstorage里。

2. 每次加载页面都要先从本地获取一次数据保存至data数据中，通过vue数据绑定自动更新页面数据。

3. 修改数据后再把最新的数据保存至localstorage，这样保证本地存储的是最新的数据。

4. 存储的数据格式：var todolist = [{id: 0, title: ‘晚上看电影。’, done:false}]。 其中title为事件内容，done表示事件是否完成。为了不操作dom元素，我们在删除和更改事件状态时，需要通过id找到被操作的事件在数据中的位置。

5. 通过v-for循环将数据显示到页面中。但是因为有已完成和未完成两种数据，我们需要声明两个函数对数组进行滤出。

6. 注意一：本地存储localStorage里面只能存储字符串格式，因此需要把对象转换为字符串JSON。stringfy(data)。

7. 注意二：获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse()我们才能使用里面的数据。