完成todoList的学些

20_脚手架/vue_code/src/App.vue

@@ -3,8 +3,8 @@
     <div class="todo-container">
       <div class="todo-wrap">
         <TodoHeader :addTodo="addTodo"/>
-        <TodoList :todos="todos"/>
+        <TodoList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
-        <TodoBottom/>
+        <TodoBottom :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/>
       </div>
     </div>
   </div>
@@ -25,6 +25,7 @@ export default {
   },
   data() {
     return {
+      // 预置测试数据
       todos: [
         {id: "001", title: "产品", done: true},
         {id: "002", title: "开发", done: true},
@@ -32,19 +33,36 @@ export default {
       ]
     }
   },
+  // 由于数据需要被不同的子组件访问，暂时没有学习数据的处理方法，所以将数据放置在父组件App中
+  // 导致处理数据的相关方法也要放到App中，通过组件间参数传递的方式传到各个组件
   methods: {
+    // 添加todo任务，绑定到TodoHeader中
     addTodo(todoObj) {
       this.todos.unshift(todoObj)
     },
 
+    // 勾选和取消勾选todo任务，穿透TodoList绑定到TodoItem中
     checkTodo(id) {
       this.todos.forEach((todo) => {
         if (todo.id === id) todo.done = !todo.done
       })
     },
 
+    // 删除单个todo任务，穿透TodoList绑定到TodoItem中
     deleteTodo(id) {
+      this.todos = this.todos.filter(todo => todo.id !== id)
+    },
+
+    // 勾选或取消勾选全部todo任务，绑定到TodoBottom中
+    checkAllTodo(done) {
+      this.todos.forEach((todo) => todo.done = done)
+    },
 
+    // 清除全部已完成的todo任务，绑定到TodoBottom中
+    clearAllTodo() {
+      this.todos = this.todos.filter((todo) => {
+        return !todo.done
+      })
     }
   }
 }

20_脚手架/vue_code/src/components/TodoBottom.vue

@@ -1,42 +1,74 @@
 <template>
-  <div class="todo-bottom">
+  <div class="todo-bottom" v-show="total">
     <label>
-      <input type="checkbox">
+      <input type="checkbox" v-model="isAll">
     </label>
     <span>
-      <span>已完成0</span>/全部2
+      <span>已完成{{ totalDone }}</span>/全部{{ total }}
     </span>
-    <button class="btn btn-danger">清除已完成任务</button>
+    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
   </div>
 </template>
 
 <script>
 export default {
-  name: "TodoBottom"
+  name: "TodoBottom",
+  props: ['todos', 'checkAllTodo', 'clearAllTodo'],
+  computed: {
+    // 用于计算全部todo任务的总数量，并且通过v-show绑定到模板，用于控制模板的展示
+    total() {
+      return this.todos.length
+    },
+    // 用于统计全部已完成的todo任务数量
+    totalDone() {
+      return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0)
+    },
+    // 计算方法的完整写法
+    // get方法用于判断是否全部任务被勾选， 返回布尔值
+    // set方法是封装了App中checkAllTodo方法用于勾选和取消勾选全部任务
+    isAll: {
+      get() {
+        return this.totalDone === this.total && this.total > 0
+      },
+      set(value) {
+        this.checkAllTodo(value)
+      }
+    }
+  },
+  methods: {
+    // 封装App中的clearAllTodo方法，用于清除全部已完成数据
+    clearAll() {
+      if (confirm("确认清除全部已完成任务？")) {
+        this.clearAllTodo()
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
-  .todo-bottom{
+.todo-bottom {
   height: 40px;
   line-height: 40px;
   padding-left: 6px;
   margin-top: 5px;
-  }
+}
 
-  .todo-bottom label{
+.todo-bottom label {
   display: inline-block;
   margin-right: 20px;
   cursor: pointer;
-  }
+}
-  .todo-bottom label input {
+
+.todo-bottom label input {
   position: relative;
   top: -1px;
   vertical-align: middle;
   margin-right: 5px;
-  }
+}
-  .todo-bottom button {
+
+.todo-bottom button {
   float: right;
   margin-top: 5px;
-  }
+}
 </style>

20_脚手架/vue_code/src/components/TodoHeader.vue

@@ -11,11 +11,14 @@ export default {
   name: "TodoHeader",
   props: ['addTodo'],
   data() {
+    // 初始化title已显示placeholder内容
     return {
       title: ''
     }
   },
   methods: {
+    // 添加todo任务，trim用户输入数据后判断是否为空，如果内容正常则生成任务的对象数据
+    // 将任务的对象数据回写到App中的todo中
     add() {
       if (!this.title.trim()) return alert("输入不能为空")
       const todoObj = {id: nanoid(), title: this.title, done: false}

20_脚手架/vue_code/src/components/TodoItem.vue

@@ -2,19 +2,27 @@
   <li>
     <label>
       <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
-      <span>{{todo.title}}</span>
+      <span>{{ todo.title }}</span>
     </label>
-    <button class="btn btn-danger">删除</button>
+    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
   </li>
 </template>
 
 <script>
 export default {
   name: "TodoItem",
-  props: ['todo', 'checkTodo'],
+  // 从todoList中接收数据todos和函数checkTodo、deleteTodo
+  props: ['todo', 'checkTodo', 'deleteTodo'],
   methods: {
+    // 将接收的checkTodo重新封装后才能在TodoItem中被调用
     handleCheck(id) {
       this.checkTodo(id)
+    },
+    // 将接收的deleteTodo重新封装后才能在TodoItem中被调用
+    handleDelete(id) {
+      if (confirm("确认删除？")) {
+        this.deleteTodo(id)
+      }
     }
   }
 
@@ -55,11 +63,12 @@ li:before {
 li:last-child {
   border-bottom: none;
 }
-li:hover{
+
+li:hover {
   background-color: #ddd;
 }
 
-li:hover button{
+li:hover button {
   display: block;
 }
 </style>

20_脚手架/vue_code/src/components/TodoList.vue

@@ -1,22 +1,24 @@
 <template>
-  <div>
   <ul class="todo-list">
     <TodoItem
         v-for="todoObj in todos"
         :key="todoObj.id"
         :todo="todoObj"
         :checkTodo="checkTodo"
+        :deleteTodo="deleteTodo"
     />
   </ul>
-  </div>
 </template>
 
 <script>
 import TodoItem from "@/components/TodoItem.vue";
+
 export default {
   name: "TodoList",
+  // 嵌套了子组件TodoItem
   components: {TodoItem},
-  props: ['todos', 'checkTodo']
+  // 从App中接收数据todos和函数checkTodo、deleteTodo，直接转发给todoItem组件，起到了bypass作用
+  props: ['todos', 'checkTodo', 'deleteTodo']
 }
 </script>
 
@@ -27,6 +29,7 @@ export default {
   border-radius: 2px;
   padding: 0px;
 }
+
 .todo-empty {
   height: 40px;
   line-height: 40px;