Project exercise - memorandum (add, delete, modify, check)

Todo List 实现

Let's design the most basic functions first,Todo List Generally used to record notes,The simplest features include（如图 1）：
(1) Add a note.
(2) Modify this memo.
(3) 选择/Select all to delete a note.
(4) Set a note as done.
(5) Quickly delete completed notes.

图 1 Todo List 基本功能

一、设计数据结构

这个界面中,We need to have the following data：备忘列表、Added memo content and modified memo information,我们在dataAdd the variable corresponding to each data in ：

export default {
  // ...其他配置
  data() {
    return {
      id: 0, // li的id
      todos: [], // List of all the memos
      newTodo: "", // Added memo
      editedTodo: {} // Modified memo
    };
  }
};

备忘列表todos用数组实现,Added memo contentnewTododirectly represented by a string,And the revised memoeditedTodoDue to the need to maintain the memo information in the revision,can be represented by objects.

二、Page logic and interaction implementation

After designing the data structure of the page,We can design and implement the functions one by one,as listed above Todo List 基本功能,We can do this in three steps：
(1) Implement new memo.
(2) Implement memo list management,包括编辑、删除等功能.
(3) Implement calculations and quickly remove the number of completed memos.

(1) Added memo.

First, let's implement the new ability of the memo,需要用到newTodo和todos两个变量.newTodoUsed to store what we are typing in the default input box,Also when the user presses Enter 键的时候（可以使用@keyup.enter绑定事件）,We just automatically add the new note to the notes listtodos中：

<!-- Enter a note,使用 v-model 绑定 newTodo -->
<!-- 监听 keyup 事件,Also use modifiers .enter,按 Enter The event fires only when the key is pressed -->
<input
  class="new-todo"
  placeholder="你接下来要做什么?"
  v-model="newTodo"
  @keyup.enter="addTodo"
/>

export default {
  // Other options are omitted
  methods: {
    // Added memo
    addTodo() {
      // If the content is empty, it will not be processed
      if (!this.newTodo) {
        return;
      }
      // Add an entry to the memo list
      // The last added memo is inserted at the top,所以使用 unshift 而不是 push
      this.todos.unshift({
        id: this.id++, // id 自增
        title: this.newTodo,
        completed: false
      });
      // 添加成功后,清空输入框,Easy to re-enter
      this.newTodo = "";
    }
  }
};

 (2) Memo list management.

Added notes will be displayed in the list,We can choose between them、删除、（双击）修改等操作.We can bind events in templates：

<!-- View all notes -->
<!-- v-for Iterate over all memos,key Binding memo 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">
    <!-- Select a note -->
    <!-- v-model Whether binding is selected -->
    <input class="toggle" type="checkbox" v-model="todo.completed" />
    <!-- Double-click to operate the note -->
    <label @dblclick="editTodo(todo)">{
   { todo.title }}</label>
    <!-- Delete a note -->
    <button class="destroy" @click="removeTodo(todo)"></button>
  </div>
  <!-- Modify the data of the memo,out of focus or Enter key to update data,Esckey to cancel the update -->
  <input
    class="edit"
    type="text"
    v-model="editedTodo.title"
    @blur="doneEdit(editedTodo)"
    @keyup.enter="doneEdit(editedTodo)"
    @keyup.esc="cancelEdit()"
  />
</li>

 Then we will implement the editing one by one、删除等方法：

export default {
  // Other options are omitted
  methods: {
    // Edit memo
    editTodo(todo) {
      // Fill the content to be edited into the modified content
      // 使用 ... 解构,相当于使用 Object.assign,属于浅拷贝
      // There is only one layer of objects here,A shallow copy is sufficient
      this.editedTodo = { ...todo };
    },
    // Confirm the modification memo
    doneEdit(todo) {
      // Update the editing content to the list
      this.todos = this.todos.map(x => {
        return todo.id == x.id ? { ...todo } : { ...x };
      });
      // Clear the edit object
      this.editedTodo = {};
    },
    // Cancel the modification memo
    cancelEdit() {
      this.editedTodo = {};
    },
    // Delete the note
    removeTodo(todo) {
      // 匹配 id Find this memo,然后移除
      const index = this.todos.findIndex(x => x.id === todo.id);
      this.todos.splice(index, 1);
    }
  }
};

(3) Count and quickly remove completed notes.

Introduced in the third chapter Vue 的基本概念,计算属性 computed 与过滤器 filter 的使用,Can be used to calculate the number of outstanding notes currently remaining,And according to the number to control whether the unit is plural（for unit calculations）：

<footer class="footer" v-show="todos.length">
  <span class="todo-count">
    <!-- remaining Calculate the remaining outstanding quantity,pluralize Used to filter whether the unit is negative -->
    <strong>{
   { remaining }}</strong> {
   { remaining | pluralize }} left
  </span>
  <!-- When there is a completed memo,One-click removal completed button appears -->
  <button
    class="clear-completed"
    @click="removeCompleted"
    v-show="todos.length > remaining"
  >
    Clear completed
  </button>
</footer>

At the same time, we also need to implement the function of one-click deletion of completed notes： 

export default {
  // Other options are omitted
  computed: {
    // Calculate the remaining outstanding notes
    remaining() {
      // Filter out completed ones,获取数量
      return this.todos.filter(x => !x.completed).length;
    }
  },
  filters: {
    // 计算单位
    pluralize(num) {
      // 如果是多个,Add the plural
      return num > 1 ? "items" : "item";
    }
  },
  methods: {
    // Delete completed notes
    removeCompleted() {
      this.todos = this.todos.filter(x => !x.completed);
    }
  }
};

 在这个小项目中,Vue We have basically used the syntax and options commonly used in ,包括指令v-for、v-if/v-show、v-model,同时还有 class 的绑定、Vue 实例的 computed、filters 等,These are some of the most basic capabilities in our development,Be proficient in how and where they are used.

原文地址:第8章 实战：Todo List From components to applications | 深入理解Vue.js实战