🎨 全局样式和局部样式

src/App.vue → src/TodoList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <input type="text" v-model="inputValue">
+      <input class="item" type="text" v-model="inputValue">
       <button @click="handleSubmit">提交</button>
     </div>
     <ul>

src/components/TodoItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <li @click="handleDelete">{{content}}</li>
+  <li class="item" @click="handleDelete">{{content}}</li>
 </template>
 
 <script>
@@ -14,5 +14,7 @@ export default {
 </script>
 
 <style scoped>
-
+  .item {
+    color: blue;
+  }
 </style>

src/main.js

@@ -1,13 +1,13 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
-import App from './App'
+import TodoList from './TodoList'
 
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
-  components: { App },
-  template: '<App/>'
+  components: { TodoList },
+  template: '<TodoList/>'
 })