项目练习——备忘录(增删改查)

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中：

<!-- 输入备忘，使用 v-model 绑定 newTodo -->
<!-- 监听 keyup 事件，同时使用修饰器 .enter，按 Enter 键时事件才触发 -->
<input
  class="new-todo"
  placeholder="你接下来要做什么?"
  v-model="newTodo"
  @keyup.enter="addTodo"
/>

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) 备忘列表管理。

已添加的备忘会展示在列表里，我们可以对它们进行选择、删除、（双击）修改等操作。我们可以在模板中绑定事件：

<!-- 查看所有备忘 -->
<!-- v-for 遍历所有备忘，key 绑定备忘 id，class 绑定样式 -->
<li
  v-for="todo in todos"
  class="todo"
  :key="todo.id"
  :class="{ completed: todo.completed, editing: todo.id == editedTodo.id }"
>
  <div class="view">
    <!-- 选择某条备忘 -->
    <!-- v-model 绑定是否选中 -->
    <input class="toggle" type="checkbox" v-model="todo.completed" />
    <!-- 双击可操作备忘 -->
    <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
    <!-- 删除某条备忘 -->
    <button class="destroy" @click="removeTodo(todo)"></button>
  </div>
  <!-- 修改备忘的数据，失焦或 Enter 键可更新数据，Esc键取消更新 -->
  <input
    class="edit"
    type="text"
    v-model="editedTodo.title"
    @blur="doneEdit(editedTodo)"
    @keyup.enter="doneEdit(editedTodo)"
    @keyup.esc="cancelEdit()"
  />
</li>

 然后我们来一一实现编辑、删除等方法：

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 的使用，可以用来计算当前剩下的未完成备忘数，以及根据数量来控制单位是否复数（用于单位计算）：

<footer class="footer" v-show="todos.length">
  <span class="todo-count">
    <!-- remaining 计算剩余的未完成的数量，pluralize 用来过滤单位是否要负数 -->
    <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
  </span>
  <!-- 当有已完成的备忘时，一键移除已完成按钮出现 -->
  <button
    class="clear-completed"
    @click="removeCompleted"
    v-show="todos.length > remaining"
  >
    Clear completed
  </button>
</footer>

同时我们还要实现一键删除已完成备忘的功能： 

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实战