Todo List 实现
我们先来设计最基础的功能，Todo List 一般用来记录备忘的，最简单的功能包括（如图 1）：
(1) 新增一条备忘。
(2) 修改该条备忘。
(3) 选择/全选删除某条备忘。
(4) 将某条备忘设置成已完成。
(5) 快速删除已完成的备忘。
图 1 Todo List 基本功能
一、设计数据结构这个界面中，我们需要有以下的数据：备忘列表、新增备忘内容和修改中的备忘信息，我们在data中添加每个数据对应的变量：
export default {
// ...其他配置
data() {
return {
id: 0, // li的id
todos: [], // 所有的备忘列表
newTodo: "", // 新增的备忘
editedTodo: {} // 修改中的备忘
};
}
};
备忘列表todos用数组实现，新增备忘内容newTodo直接用字符串来表示，而修改中的备忘editedTodo由于需要维护修改中的备忘信息，可以用对象来表示。
二、页面逻辑与交互实现设计了页面的数据结构之后，我们就可以一个一个地进行功能设计和实现，根据前面罗列的 Todo List 基本功能，我们可以分成三个步骤来实现：
(1) 实现新增备忘。
(2) 实现备忘列表管理，包括编辑、删除等功能。
(3) 实现计算与快速移除已完成备忘数。
(1) 新增的备忘。
首先我们来实现备忘新增的能力，需要用到newTodo和todos两个变量。newTodo用来存储我们正在默认输入框中输入的内容，同时当用户按下 Enter 键的时候（可以使用@keyup.enter绑定事件），我们就自动将新的备忘添加到备忘列表todos中：
export default {
// 其他选项省略
methods: {
// 新增备忘
addTodo() {
// 内容为空则不处理
if (!this.newTodo) {
return;
}
// 往备忘列表中新增一条
// 最后新增的备忘插在最前面，所以使用 unshift 而不是 push
this.todos.unshift({
id: this.id++, // id 自增
title: this.newTodo,
completed: false
});
// 添加成功后，清空输入框，方便重新输入
this.newTodo = "";
}
}
};
(2) 备忘列表管理。
已添加的备忘会展示在列表里，我们可以对它们进行选择、删除、（双击）修改等操作。我们可以在模板中绑定事件：
然后我们来一一实现编辑、删除等方法：
export default {
// 其他选项省略
methods: {
// 编辑备忘
editTodo(todo) {
// 将待编辑的内容填充到修改的内容中
// 使用 ... 解构，相当于使用 Object.assign，属于浅拷贝
// 此处对象只有一层，浅拷贝足矣
this.editedTodo = { ...todo };
},
// 确认修改备忘
doneEdit(todo) {
// 将编辑中内容更新到列表中
this.todos = this.todos.map(x => {
return todo.id == x.id ? { ...todo } : { ...x };
});
// 清空编辑对象
this.editedTodo = {};
},
// 取消修改备忘
cancelEdit() {
this.editedTodo = {};
},
// 删除备忘
removeTodo(todo) {
// 匹配 id 找出该备忘，然后移除
const index = this.todos.findIndex(x => x.id === todo.id);
this.todos.splice(index, 1);
}
}
};
(3) 计算与快速移除已完成备忘数。
前面第三章介绍了 Vue 的基本概念，计算属性 computed 与过滤器 filter 的使用，可以用来计算当前剩下的未完成备忘数，以及根据数量来控制单位是否复数（用于单位计算）：
同时我们还要实现一键删除已完成备忘的功能：
export default {
// 其他选项省略
computed: {
// 计算剩余未完成的备忘
remaining() {
// 过滤掉已完成的，获取数量
return this.todos.filter(x => !x.completed).length;
}
},
filters: {
// 计算单位
pluralize(num) {
// 如果是多个，则加复数
return num > 1 ? "items" : "item";
}
},
methods: {
// 删除已完成的备忘
removeCompleted() {
this.todos = this.todos.filter(x => !x.completed);
}
}
};
在这个小项目中，Vue 中常用的语法和选项我们都基本上用上了，包括指令v-for、v-if/v-show、v-model，同时还有 class 的绑定、Vue 实例的 computed、filters 等，这些在我们开发中是最基本的一些能力，要熟练掌握它们的使用范围和方式。
原文地址:第8章 实战：Todo List 从组件到应用 | 深入理解Vue.js实战
