准备开发环境，开始学习事件总线

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

@@ -1,118 +1,32 @@
 <template>
-  <div id="root">
-    <div class="todo-container">
-      <div class="todo-wrap">
-        <TodoHeader @addTodo="addTodo"/>
-        <TodoList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/>
-        <TodoBottom :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
-      </div>
-    </div>
+  <div class="app">
+    <h1>{{ msg }}</h1>
+    <School/>
+    <Student/>
   </div>
 </template>
 
 <script>
-import TodoHeader from "./components/TodoHeader.vue";
-import TodoList from "./components/TodoList.vue";
-import TodoBottom from "./components/TodoBottom.vue";
-
+import School from "./components/School.vue";
+import Student from "./components/Student.vue";
 
 export default {
   name: "App",
   components: {
-    TodoHeader,
-    TodoList,
-    TodoBottom
+    School,
+    Student
   },
   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))
-      }
+      msg: "Hello:",
     }
   }
 }
 </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;
+.app {
+  background-color: gray;
+  padding: 15px
 }
 </style>

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

@@ -0,0 +1,27 @@
+<template>
+  <div class="school">
+    <h2>学校名称：{{ name }}</h2>
+    <h2>学校地址：{{ address }}</h2>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "School",
+  data() {
+    return {
+      name: "修仙学院",
+      address: "长白山",
+    }
+  }
+}
+</script>
+
+<style scoped>
+.school {
+  background-color: skyblue;
+  padding: 15px
+}
+</style>
+

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

@@ -0,0 +1,27 @@
+<template>
+  <div class="student">
+    <h2>学生名称：{{ name }}</h2>
+    <h2>学生年龄：{{ age }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Student",
+  data() {
+    return {
+      name: "小强",
+      age: 18
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.student {
+  background-color: pink;
+  padding: 15px;
+  margin-top: 20px;
+}
+</style>
+