diff --git a/20_脚手架/vue_code/09.自定义事件/App.vue b/20_脚手架/vue_code/09.src_自定义事件/App.vue
similarity index 100%
rename from 20_脚手架/vue_code/09.自定义事件/App.vue
rename to 20_脚手架/vue_code/09.src_自定义事件/App.vue
diff --git a/20_脚手架/vue_code/09.自定义事件/assets/logo.png b/20_脚手架/vue_code/09.src_自定义事件/assets/logo.png
similarity index 100%
rename from 20_脚手架/vue_code/09.自定义事件/assets/logo.png
rename to 20_脚手架/vue_code/09.src_自定义事件/assets/logo.png
diff --git a/20_脚手架/vue_code/09.自定义事件/components/School.vue b/20_脚手架/vue_code/09.src_自定义事件/components/School.vue
similarity index 100%
rename from 20_脚手架/vue_code/09.自定义事件/components/School.vue
rename to 20_脚手架/vue_code/09.src_自定义事件/components/School.vue
diff --git a/20_脚手架/vue_code/09.自定义事件/components/Student.vue b/20_脚手架/vue_code/09.src_自定义事件/components/Student.vue
similarity index 100%
rename from 20_脚手架/vue_code/09.自定义事件/components/Student.vue
rename to 20_脚手架/vue_code/09.src_自定义事件/components/Student.vue
diff --git a/20_脚手架/vue_code/09.自定义事件/main.js b/20_脚手架/vue_code/09.src_自定义事件/main.js
similarity index 100%
rename from 20_脚手架/vue_code/09.自定义事件/main.js
rename to 20_脚手架/vue_code/09.src_自定义事件/main.js
diff --git a/20_脚手架/vue_code/13.src_订阅事件_pubsub/App.vue b/20_脚手架/vue_code/13.src_订阅事件_pubsub/App.vue
new file mode 100644
index 0000000..c8d2876
--- /dev/null
+++ b/20_脚手架/vue_code/13.src_订阅事件_pubsub/App.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="app">
+    <h1>{{ msg }}</h1>
+    <School/>
+    <Student/>
+  </div>
+</template>
+
+<script>
+import School from "./components/School.vue";
+import Student from "./components/Student.vue";
+
+export default {
+  name: "App",
+  components: {
+    School,
+    Student
+  },
+  data() {
+    return {
+      msg: "Hello:",
+    }
+  }
+}
+</script>
+
+<style>
+.app {
+  background-color: gray;
+  padding: 15px
+}
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/13.src_订阅事件_pubsub/assets/logo.png b/20_脚手架/vue_code/13.src_订阅事件_pubsub/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/20_脚手架/vue_code/13.src_订阅事件_pubsub/assets/logo.png differ
diff --git a/20_脚手架/vue_code/src/components/School.vue b/20_脚手架/vue_code/13.src_订阅事件_pubsub/components/School.vue
similarity index 100%
rename from 20_脚手架/vue_code/src/components/School.vue
rename to 20_脚手架/vue_code/13.src_订阅事件_pubsub/components/School.vue
diff --git a/20_脚手架/vue_code/src/components/Student.vue b/20_脚手架/vue_code/13.src_订阅事件_pubsub/components/Student.vue
similarity index 100%
rename from 20_脚手架/vue_code/src/components/Student.vue
rename to 20_脚手架/vue_code/13.src_订阅事件_pubsub/components/Student.vue
diff --git a/20_脚手架/vue_code/13.src_订阅事件_pubsub/main.js b/20_脚手架/vue_code/13.src_订阅事件_pubsub/main.js
new file mode 100644
index 0000000..4d5e394
--- /dev/null
+++ b/20_脚手架/vue_code/13.src_订阅事件_pubsub/main.js
@@ -0,0 +1,19 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')
diff --git a/20_脚手架/vue_code/14.src_todolist订阅事件/App.vue b/20_脚手架/vue_code/14.src_todolist订阅事件/App.vue
new file mode 100644
index 0000000..2bdf923
--- /dev/null
+++ b/20_脚手架/vue_code/14.src_todolist订阅事件/App.vue
@@ -0,0 +1,131 @@
+<template>
+  <div id="root">
+    <div class="todo-container">
+      <div class="todo-wrap">
+        <TodoHeader @addTodo="addTodo"/>
+        <TodoList :todos="todos"/>
+        <TodoBottom :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import pubsub from 'pubsub-js'
+import TodoHeader from "./components/TodoHeader.vue";
+import TodoList from "./components/TodoList.vue";
+import TodoBottom from "./components/TodoBottom.vue";
+
+
+export default {
+  name: "App",
+  components: {
+    TodoHeader,
+    TodoList,
+    TodoBottom
+  },
+  data() {
+    return {
+      // 预置测试数据
+      todos: JSON.parse(localStorage.getItem('todos')) || []
+    }
+  },
+  // 由于数据需要被不同的子组件访问，暂时没有学习数据的处理方法，所以将数据放置在父组件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
+      })
+    }
+  },
+  watch: {
+    todos: {
+      deep: true,
+      handler(value) {
+        localStorage.setItem('todos', JSON.stringify(value))
+      }
+    }
+  },
+  // 生成全局事件总线
+  mounted() {
+    this.$bus.$on('checkTodo', this.checkTodo)
+    // this.$bus.$on('deleteTodo', this.deleteTodo)
+    this.pubId = pubsub.subscribe('itemDel', this.deleteTodo)  // 使用订阅方式实现删除功能
+  },
+  // 销毁全局事件总线
+  beforeDestroy() {
+    this.$bus.$off('checkTodo')
+    // this.$bus.$off('deleteTodo')
+    this.pubsub.unsubscribe(this, pubId)  // 使用订阅方式实现删除功能，销毁订阅
+  }
+}
+</script>
+
+<style>
+body {
+  background: #fff;
+}
+
+.btn {
+  display: inline-block;
+  padding: 4px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #da4f49;
+  border: 1px solid #bd362f;
+}
+
+.btn-danger:hover {
+  color: #fff;
+  background-color: #bd362f;
+}
+
+.btn:focus {
+  outline: none;
+}
+
+.todo-container {
+  width: 600px;
+  margin: 0 auto;
+}
+
+.todo-container .todo-wrap {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/14.src_todolist订阅事件/assets/logo.png b/20_脚手架/vue_code/14.src_todolist订阅事件/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/20_脚手架/vue_code/14.src_todolist订阅事件/assets/logo.png differ
diff --git a/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoBottom.vue b/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoBottom.vue
new file mode 100644
index 0000000..b4de571
--- /dev/null
+++ b/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoBottom.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="todo-bottom" v-show="total">
+    <label>
+      <input type="checkbox" v-model="isAll">
+    </label>
+    <span>
+      <span>已完成{{ totalDone }}</span>/全部{{ total }}
+    </span>
+    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TodoBottom",
+  // props: ['todos', 'checkAllTodo', 'clearAllTodo'],
+  props: ['todos'],
+  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)
+        this.$emit('checkAllTodo', value)
+      }
+    }
+  },
+  methods: {
+    // 封装App中的clearAllTodo方法，用于清除全部已完成数据
+    clearAll() {
+      if (confirm("确认清除全部已完成任务？")) {
+        this.$emit('clearAllTodo')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.todo-bottom {
+  height: 40px;
+  line-height: 40px;
+  padding-left: 6px;
+  margin-top: 5px;
+}
+
+.todo-bottom label {
+  display: inline-block;
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.todo-bottom label input {
+  position: relative;
+  top: -1px;
+  vertical-align: middle;
+  margin-right: 5px;
+}
+
+.todo-bottom button {
+  float: right;
+  margin-top: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoHeader.vue b/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoHeader.vue
new file mode 100644
index 0000000..d4a857c
--- /dev/null
+++ b/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoHeader.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="todo-header">
+    <input type="text" placeholder="请输入你的任务名称，按回车确认" v-model="title" @keyup.en.enter="add">
+  </div>
+</template>
+
+<script>
+import {nanoid} from "nanoid"
+
+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}
+      // this.addTodo(todoObj)  // 改用emit触发自定义事件
+      this.$emit('addTodo', todoObj)
+      this.title = ''
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+.todo-header input {
+  width: 560px;
+  height: 28px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 4px 7px;
+}
+
+.todo-header input:focus {
+  outline: none;
+  border-color: rgba(82, 168, 236, 0.8);
+  box-shadow: inset 0 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoItem.vue b/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoItem.vue
new file mode 100644
index 0000000..8aa3ac4
--- /dev/null
+++ b/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoItem.vue
@@ -0,0 +1,75 @@
+<template>
+  <li>
+    <label>
+      <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
+      <span>{{ todo.title }}</span>
+    </label>
+    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
+  </li>
+</template>
+
+<script>
+import pubsub from 'pubsub-js'
+
+export default {
+  name: "TodoItem",
+  // 从todoList中接收数据todos和函数checkTodo、deleteTodo
+  props: ['todo'],
+  methods: {
+    // 触发全局事件总线中的方法，触发app中发回调方法
+    handleCheck(id) {
+      this.$bus.$emit('checkTodo', id)
+    },
+    // 通过订阅消息形式实现
+    handleDelete(id) {
+      if (confirm("确认删除？")) {
+        pubsub.publish('itemDel',id)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+li {
+  list-style: none;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 5px;
+  border-bottom: 1px solid #ddd;
+}
+
+li label {
+  float: left;
+  cursor: pointer;
+}
+
+li label input {
+  vertical-align: middle;
+  margin-right: 6px;
+  position: relative;
+  top: -1px;
+}
+
+li button {
+  float: right;
+  display: none;
+  margin-top: 3px;
+}
+
+li:before {
+  content: initial;
+}
+
+li:last-child {
+  border-bottom: none;
+}
+
+li:hover {
+  background-color: #ddd;
+}
+
+li:hover button {
+  display: block;
+}
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoList.vue b/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoList.vue
new file mode 100644
index 0000000..4be4cc2
--- /dev/null
+++ b/20_脚手架/vue_code/14.src_todolist订阅事件/components/TodoList.vue
@@ -0,0 +1,38 @@
+<template>
+  <ul class="todo-list">
+    <TodoItem
+        v-for="todoObj in todos"
+        :key="todoObj.id"
+        :todo="todoObj"
+    />
+  </ul>
+</template>
+
+<script>
+import TodoItem from "@/components/TodoItem.vue";
+
+export default {
+  name: "TodoList",
+  // 嵌套了子组件TodoItem
+  components: {TodoItem},
+  props: ['todos']
+}
+</script>
+
+<style scoped>
+.todo-list {
+  margin-left: 0px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  padding: 0px;
+}
+
+.todo-empty {
+  height: 40px;
+  line-height: 40px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  padding-left: 5px;
+  margin-top: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/14.src_todolist订阅事件/main.js b/20_脚手架/vue_code/14.src_todolist订阅事件/main.js
new file mode 100644
index 0000000..4d5e394
--- /dev/null
+++ b/20_脚手架/vue_code/14.src_todolist订阅事件/main.js
@@ -0,0 +1,19 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App),
+    beforeCreate() {
+        Vue.prototype.$bus = this  // 安装全局事件总线
+    }
+}).$mount('#app')
diff --git a/20_脚手架/vue_code/package-lock.json b/20_脚手架/vue_code/package-lock.json
index 2ba2270..d6b8488 100644
--- a/20_脚手架/vue_code/package-lock.json
+++ b/20_脚手架/vue_code/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
+        "pubsub-js": "^1.9.4",
         "vue": "^2.6.14"
       },
       "devDependencies": {
@@ -8553,6 +8554,11 @@
       "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
       "dev": true
     },
+    "node_modules/pubsub-js": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/pubsub-js/-/pubsub-js-1.9.4.tgz",
+      "integrity": "sha512-hJYpaDvPH4w8ZX/0Fdf9ma1AwRgU353GfbaVfPjfJQf1KxZ2iHaHl3fAUw1qlJIR5dr4F3RzjGaWohYUEyoh7A=="
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
@@ -17480,6 +17486,11 @@
       "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
       "dev": true
     },
+    "pubsub-js": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/pubsub-js/-/pubsub-js-1.9.4.tgz",
+      "integrity": "sha512-hJYpaDvPH4w8ZX/0Fdf9ma1AwRgU353GfbaVfPjfJQf1KxZ2iHaHl3fAUw1qlJIR5dr4F3RzjGaWohYUEyoh7A=="
+    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
diff --git a/20_脚手架/vue_code/package.json b/20_脚手架/vue_code/package.json
index 24398f5..5502076 100644
--- a/20_脚手架/vue_code/package.json
+++ b/20_脚手架/vue_code/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "pubsub-js": "^1.9.4",
     "vue": "^2.6.14"
   },
   "devDependencies": {
diff --git a/20_脚手架/vue_code/src/App.vue b/20_脚手架/vue_code/src/App.vue
index c8d2876..2bdf923 100644
--- a/20_脚手架/vue_code/src/App.vue
+++ b/20_脚手架/vue_code/src/App.vue
@@ -1,32 +1,131 @@
 <template>
-  <div class="app">
-    <h1>{{ msg }}</h1>
-    <School/>
-    <Student/>
+  <div id="root">
+    <div class="todo-container">
+      <div class="todo-wrap">
+        <TodoHeader @addTodo="addTodo"/>
+        <TodoList :todos="todos"/>
+        <TodoBottom :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import School from "./components/School.vue";
-import Student from "./components/Student.vue";
+import pubsub from 'pubsub-js'
+import TodoHeader from "./components/TodoHeader.vue";
+import TodoList from "./components/TodoList.vue";
+import TodoBottom from "./components/TodoBottom.vue";
+
 
 export default {
   name: "App",
   components: {
-    School,
-    Student
+    TodoHeader,
+    TodoList,
+    TodoBottom
   },
   data() {
     return {
-      msg: "Hello:",
+      // 预置测试数据
+      todos: JSON.parse(localStorage.getItem('todos')) || []
+    }
+  },
+  // 由于数据需要被不同的子组件访问，暂时没有学习数据的处理方法，所以将数据放置在父组件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
+      })
+    }
+  },
+  watch: {
+    todos: {
+      deep: true,
+      handler(value) {
+        localStorage.setItem('todos', JSON.stringify(value))
+      }
     }
+  },
+  // 生成全局事件总线
+  mounted() {
+    this.$bus.$on('checkTodo', this.checkTodo)
+    // this.$bus.$on('deleteTodo', this.deleteTodo)
+    this.pubId = pubsub.subscribe('itemDel', this.deleteTodo)  // 使用订阅方式实现删除功能
+  },
+  // 销毁全局事件总线
+  beforeDestroy() {
+    this.$bus.$off('checkTodo')
+    // this.$bus.$off('deleteTodo')
+    this.pubsub.unsubscribe(this, pubId)  // 使用订阅方式实现删除功能，销毁订阅
   }
 }
 </script>
 
 <style>
-.app {
-  background-color: gray;
-  padding: 15px
+body {
+  background: #fff;
+}
+
+.btn {
+  display: inline-block;
+  padding: 4px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #da4f49;
+  border: 1px solid #bd362f;
+}
+
+.btn-danger:hover {
+  color: #fff;
+  background-color: #bd362f;
+}
+
+.btn:focus {
+  outline: none;
+}
+
+.todo-container {
+  width: 600px;
+  margin: 0 auto;
+}
+
+.todo-container .todo-wrap {
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
 }
 </style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoBottom.vue b/20_脚手架/vue_code/src/components/TodoBottom.vue
new file mode 100644
index 0000000..b4de571
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/TodoBottom.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="todo-bottom" v-show="total">
+    <label>
+      <input type="checkbox" v-model="isAll">
+    </label>
+    <span>
+      <span>已完成{{ totalDone }}</span>/全部{{ total }}
+    </span>
+    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TodoBottom",
+  // props: ['todos', 'checkAllTodo', 'clearAllTodo'],
+  props: ['todos'],
+  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)
+        this.$emit('checkAllTodo', value)
+      }
+    }
+  },
+  methods: {
+    // 封装App中的clearAllTodo方法，用于清除全部已完成数据
+    clearAll() {
+      if (confirm("确认清除全部已完成任务？")) {
+        this.$emit('clearAllTodo')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.todo-bottom {
+  height: 40px;
+  line-height: 40px;
+  padding-left: 6px;
+  margin-top: 5px;
+}
+
+.todo-bottom label {
+  display: inline-block;
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.todo-bottom label input {
+  position: relative;
+  top: -1px;
+  vertical-align: middle;
+  margin-right: 5px;
+}
+
+.todo-bottom button {
+  float: right;
+  margin-top: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoHeader.vue b/20_脚手架/vue_code/src/components/TodoHeader.vue
new file mode 100644
index 0000000..d4a857c
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/TodoHeader.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="todo-header">
+    <input type="text" placeholder="请输入你的任务名称，按回车确认" v-model="title" @keyup.en.enter="add">
+  </div>
+</template>
+
+<script>
+import {nanoid} from "nanoid"
+
+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}
+      // this.addTodo(todoObj)  // 改用emit触发自定义事件
+      this.$emit('addTodo', todoObj)
+      this.title = ''
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+.todo-header input {
+  width: 560px;
+  height: 28px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 4px 7px;
+}
+
+.todo-header input:focus {
+  outline: none;
+  border-color: rgba(82, 168, 236, 0.8);
+  box-shadow: inset 0 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoItem.vue b/20_脚手架/vue_code/src/components/TodoItem.vue
new file mode 100644
index 0000000..8aa3ac4
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/TodoItem.vue
@@ -0,0 +1,75 @@
+<template>
+  <li>
+    <label>
+      <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
+      <span>{{ todo.title }}</span>
+    </label>
+    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
+  </li>
+</template>
+
+<script>
+import pubsub from 'pubsub-js'
+
+export default {
+  name: "TodoItem",
+  // 从todoList中接收数据todos和函数checkTodo、deleteTodo
+  props: ['todo'],
+  methods: {
+    // 触发全局事件总线中的方法，触发app中发回调方法
+    handleCheck(id) {
+      this.$bus.$emit('checkTodo', id)
+    },
+    // 通过订阅消息形式实现
+    handleDelete(id) {
+      if (confirm("确认删除？")) {
+        pubsub.publish('itemDel',id)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+li {
+  list-style: none;
+  height: 36px;
+  line-height: 36px;
+  padding: 0 5px;
+  border-bottom: 1px solid #ddd;
+}
+
+li label {
+  float: left;
+  cursor: pointer;
+}
+
+li label input {
+  vertical-align: middle;
+  margin-right: 6px;
+  position: relative;
+  top: -1px;
+}
+
+li button {
+  float: right;
+  display: none;
+  margin-top: 3px;
+}
+
+li:before {
+  content: initial;
+}
+
+li:last-child {
+  border-bottom: none;
+}
+
+li:hover {
+  background-color: #ddd;
+}
+
+li:hover button {
+  display: block;
+}
+</style>
\ No newline at end of file
diff --git a/20_脚手架/vue_code/src/components/TodoList.vue b/20_脚手架/vue_code/src/components/TodoList.vue
new file mode 100644
index 0000000..4be4cc2
--- /dev/null
+++ b/20_脚手架/vue_code/src/components/TodoList.vue
@@ -0,0 +1,38 @@
+<template>
+  <ul class="todo-list">
+    <TodoItem
+        v-for="todoObj in todos"
+        :key="todoObj.id"
+        :todo="todoObj"
+    />
+  </ul>
+</template>
+
+<script>
+import TodoItem from "@/components/TodoItem.vue";
+
+export default {
+  name: "TodoList",
+  // 嵌套了子组件TodoItem
+  components: {TodoItem},
+  props: ['todos']
+}
+</script>
+
+<style scoped>
+.todo-list {
+  margin-left: 0px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  padding: 0px;
+}
+
+.todo-empty {
+  height: 40px;
+  line-height: 40px;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  padding-left: 5px;
+  margin-top: 10px;
+}
+</style>
\ No newline at end of file