【IMWeb训练营作业】todolist

这是一个用Vue.js 做的练手项目。在线演示，点这里。

先来几张图片。
默认的外观：

添加几个待办适宜后的外观：

编辑待办适宜后的外观：

标记为已完成后的外观：

筛选未完成的外观：

删除1个待办适宜后的外观：

实现思路：
用一个数组保存所有待办适宜。每个待办适宜的格式是如下

{
  id: xxxxx, // 唯一标识
  title: '', // 标题
  completed: false // 是否已完成
}

我用新建待办适宜时的时间戳做那条待办适宜的id。

对待办适宜的增删改查就是对数组的增删改查。下面是部分代码
新增

create: function() {
  var title = this.newTodo.trim()
  if (title) {
    this.todos.push({
      id: Date.now(),// 用当前时间戳做为id
      title: title,
      completed: false
    })
  }
  this.newTodo = ''
}

修改

update: function(todo) {
  if (!this.editingTodo) {
    return
  }
  this.editingTodo = null
  todo.title = todo.title.trim()
  if (!todo.title) {
    this.remove(todo.id)
  }
}

删除

remove: function(id) {
  this.todos = this.todos.filter(function(todo) {
    return todo.id !== id
  })
}

查看所有已完成的

completed: function(todos) {
  return todos.filter(function(todo) {
    return todo.completed
  })
}

前端路由用的 director。当然，用 vue-router 也是可以的。

为了下次进来还能看到以前编辑的待办适宜。把数据存在了 localStorage。

watch: {
  todos: { // 数据一变化，就存一下
    deep: true,
    handler: todoStorage.save
  }
}

所有源码见这里。