完成scoped样式学习

20_脚手架/vue_code/5.src_scoped样式/App.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <School/>
+    <Student/>
+  </div>
+</template>
+
+<script>
+import School from "./components/School.vue";
+import Student from "./components/Student.vue";
+
+export default {
+  name: "App",
+  components: {
+    School,
+    Student
+  }
+}
+</script>
+
+<style>
+.title {
+  color: red
+}
+</style>

20_脚手架/vue_code/5.src_scoped样式/components/School.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="demo">
+    <h2 class="title">学校名称：{{ name }}</h2>
+    <h2>学校地址：{{ address }}</h2>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "School",
+  data() {
+    return {
+      name: "修仙学院",
+      address: "长白山",
+      msg: "欢迎学校"  // 以vc内数据为准
+    }
+  },
+}
+</script>
+
+<style lang="css" scoped>
+.demo {
+  background-color: orange;
+}
+</style>
+

20_脚手架/vue_code/5.src_scoped样式/components/Student.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="demo">
+    <h2 class="title">学生名称：{{ name }}</h2>
+    <h2>学生年龄：{{ age }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Student",
+  data() {
+    return {
+      name: "小强",
+      age: 18,
+      msg: "欢迎学生"
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+.demo {
+  background-color: skyblue;
+}
+</style>
+

20_脚手架/vue_code/5.src_scoped样式/main.js

@@ -0,0 +1,16 @@
+// 引入Vue
+import Vue from "vue";
+// 引入App
+import App from "./App";
+
+// 设置Vue
+Vue.config.productionTip = false
+
+
+// 实例化Vue
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App)
+}).$mount('#app')

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

@@ -17,3 +17,9 @@ export default {
   }
 }
 </script>
+
+<style>
+.title {
+  color: red
+}
+</style>

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

@@ -1,8 +1,7 @@
 <template>
-  <div>
+  <div class="demo">
-    <h2>学校名称：{{ name | mySlice}}</h2>
+    <h2 class="title">学校名称：{{ name }}</h2>
     <h2>学校地址：{{ address }}</h2>
-    <button @click="test">点击触发hello方法</button>
   </div>
 </template>
 
@@ -12,16 +11,17 @@ export default {
   name: "School",
   data() {
     return {
-      name: "修仙学院修仙学院修仙学院",
+      name: "修仙学院",
       address: "长白山",
       msg: "欢迎学校"  // 以vc内数据为准
     }
   },
-  methods: {
-    test() {
-      this.hello()
-    }
-  }
 }
 </script>
 
+<style lang="css" scoped>
+.demo {
+  background-color: orange;
+}
+</style>
+

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

@@ -1,8 +1,7 @@
 <template>
-  <div>
+  <div class="demo">
-    <h2>学生名称：{{ name }}</h2>
+    <h2 class="title">学生名称：{{ name }}</h2>
     <h2>学生年龄：{{ age }}</h2>
-    <input type="text" v-fbind:value="name">
   </div>
 </template>
 
@@ -19,3 +18,9 @@ export default {
 }
 </script>
 
+<style lang="css" scoped>
+.demo {
+  background-color: skyblue;
+}
+</style>
+

20_脚手架/vue_code/src/main.js

@@ -2,14 +2,10 @@
 import Vue from "vue";
 // 引入App
 import App from "./App";
-// 引入插件
-import plugins from "./plugins"
 
 // 设置Vue
 Vue.config.productionTip = false
 
-// 使用插件
-Vue.use(plugins)
 
 // 实例化Vue
 new Vue({

20_脚手架/vue_code/src/plugins.js

@@ -1,34 +0,0 @@
-export default {
-    install(Vue) {
-        // 全局过滤器
-        Vue.filter("mySlice", function (value) {
-            return value.slice(0, 4)
-        })
-
-        //   全局指令
-        Vue.directive("fbind", {
-            bind(element, binding) {
-                element.value = binding.value
-            },
-            inserted(element, binding) {
-                element.focus()
-            },
-            update(element, binding) {
-                element.value = binding.value
-            }
-        })
-
-        //     定义混入
-        Vue.mixin({
-            data() {
-                return {
-                    x: 100,
-                    y: 200
-                }
-            }
-        })
-
-        // 给Vue原型上添加一个方法
-        Vue.prototype.hello = ()=> {alert('Hello')}
-    }
-}