vue2

vue/vue高阶/1.归纳.md

@@ -23,4 +23,7 @@ pnpm install
 1.自定义代码片段
 2.创建组件 在components文件夹下创建
 3.在vue.config.js中关闭eslint格式校验：lintOnSave:false 重启项目
-4.使用组件分为三步：详情见=>App.vue
+4.使用组件分为三步：详情见=>App.vue
+5.ref
+6.data为什么是函数
+7.scoped 样式隔断 确保每一个页面的样式准确性

vue/vue高阶/hello/src/App.vue

@@ -3,16 +3,36 @@
     你好
     <!-- 3.在需要的地方使用组件标签 -->
     <haha></haha>
+  
+    <h4 ref="aaa">哈哈哈哈哈哈{{ msg }}</h4>
+    <button @click="getMain">获取</button>
+    <Demo2/>
   </div>
 </template>
 
 <script>
 // 1.将组件模块引入
 import Demo1 from './components/Demo1.vue'
-export default {
+import Demo2 from './components/Demo2.vue'
+export default { 
+  // data:{},
+  // 为什么vue种data要写成函数呢？
+  data() {
+    return {
+      msg:"放假了"
+    }
+  },
+  created(){},
+  computed:{},
   // 2.将组件注册
   components:{
-    haha:Demo1
+    haha:Demo1,
+    Demo2
+  },
+  methods:{
+    getMain() {
+      console.log(this.$refs.aaa)
+    }
   }
 
 }

vue/vue高阶/hello/src/components/Demo1.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="demo1">
     <h1>案例一</h1>
+    <div class="box"></div>
   </div>
 </template>
 
@@ -10,6 +11,10 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped>
+  .box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
 </style>

vue/vue高阶/hello/src/components/Demo2.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="demo2">
+    案例二
+    <div class="box"></div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+.box {
+    width: 300px;
+    height: 300px;
+    background: #00f;
+}
+</style>