admin

10-vuecli/vueapp/myapp/src/App.vue

@@ -2,19 +2,47 @@
 <template>
   <!-- template 模板部分内部职能有一个最外层的div -->
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <img alt="Vue logo" src="./assets/logo.png" />
+    <HelloWorld msg="Welcome to Your Vue.js App" />
     <!-- 第三步 使用MyPage组件 -->
-     <MyPage/>
+    <MyPage />
     <div class="page-two">
       <!-- 父组件向子组件穿参 在组件上写一个自定义属性名等于你要传递的变量  -->
-        <MyPageTwo str="hello" v-bind:val="myName"/>
+      <MyPageTwo str="hello" v-bind:val="myName" />
     </div>
     <div class="page-three">
       <!-- 子组件向父组件传递参数 -->
-       <!-- 子组件向父组件传递参数 通过 自定义事件 -->
-        <!-- 这里的getVal 是自定义事件的名称 自己起的名字 -->
-      <MyPageThree @getVal="conVal"/>
+      <!-- 子组件向父组件传递参数 通过 自定义事件 -->
+      <!-- 这里的getVal 是自定义事件的名称 自己起的名字 -->
+      <MyPageThree @getVal="conVal" />
+
+      <!-- 父组件 给子组件传递一段html代码 -->
+      <div class="page-four">
+        <MyPageFour>
+          <h1>我是父组件传递过来的html代码</h1>
+          <p>我是父组件传递过来的p标签</p>
+        </MyPageFour>
+      </div>
+      <!-- v-slot （具名插槽） 指令 将传递的标签分组  -->
+      <div class="page-five">
+        <MyPageFive>
+          <template v-slot:header> <span>我是页头</span></template>
+          <template v-slot:footer> <span>我是页脚</span></template>
+        </MyPageFive>
+      </div>
+
+      <!-- 生命周期函数 -->
+       <div class="page-six" v-if="isShow">
+        <MyPageSix />
+
+        <button @click="hideCom">隐藏组件</button>
+       </div>
+      
+       <!-- is 指令 切换组件 -->
+       <div class="box">
+        <!-- is 后边写的哪个组件名称 就显示哪个组件 -->
+        <div is="MyPageFive"></div>
+       </div> 
     </div>
   </div>
 </template>
@@ -22,25 +50,35 @@
 <script>
 // import es6新增的模块化管理
 // import 可以引入外部的js文件或组件
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from "./components/HelloWorld.vue";
 
 // 第一步 引入MyPage组件
-import MyPage from "./components/MyPage.vue"
+import MyPage from "./components/MyPage.vue";
+
+import MyPageTwo from "./components/MyPageTwo.vue";
+
+import MyPageThree from "./components/MyPageThree.vue";
+
+import MyPageFour from "./components/MyPageFour.vue";
 
-import MyPageTwo from "./components/MyPageTwo.vue"
+import MyPageFive from "./components/MyPageFive.vue";
 
-import MyPageThree from "./components/MyPageThree.vue"
+import MyPageSix from "./components/MyPageSix.vue";
 // export default 用于导出js文件内容或当前模块的内容
 export default {
-  name: 'App',
-  data(){
-    return{
-      myName:"app"
-    }
+  name: "App",
+  data() {
+    return {
+      myName: "app",
+      isShow: true,
+    };
   },
-  methods:{
-    conVal(val){
-      console.log("父组件接收到子组件传递过来的值",val);
+  methods: {
+    conVal(val) {
+      console.log("父组件接收到子组件传递过来的值", val);
+    },
+    hideCom() {
+      this.isShow = false; // 点击按钮隐藏组件
     }
   },
   components: {
@@ -48,9 +86,12 @@ export default {
     // 第二步 注册MyPage组件
     MyPage,
     MyPageTwo,
-    MyPageThree
-  }
-}
+    MyPageThree,
+    MyPageFour,
+    MyPageFive,
+    MyPageSix
+  },
+};
 </script>
 
 <style>
@@ -62,20 +103,54 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
-.page-two{
+.page-two {
   position: fixed;
   top: 100px;
   right: 100px;
   width: 400px;
   height: 400px;
-  border:3px solid black
+  border: 3px solid black;
 }
-.page-three{
+.page-three {
   position: fixed;
-  top:100px;
+  top: 100px;
   left: 100px;
   width: 400px;
   height: 400px;
-  border:3px solid black;
+  border: 3px solid black;
+}
+.page-four{
+  position: fixed;
+  bottom: 50px;
+  left: 100px;
+  width: 400px;
+  height: 200px;
+  border: 3px solid black;
+}
+.page-five{
+  position: fixed;
+  bottom: 50px;
+  right: 100px;
+  width: 400px;
+  height: 200px;
+  border: 3px solid black;
+}
+.page-six{
+  position: fixed;
+  width: 200px;
+  height: 200px;
+  border: 3px solid black;
+  bottom: 50px;
+  left: 50%;
+  margin-left: -100px;
+}
+.box{
+  position: fixed;
+  width: 200px;
+  height: 200px;
+  border: 3px solid black;
+  top: 50px;
+  left: 50%;
+  margin-left: -100px;
 }
 </style>

10-vuecli/vueapp/myapp/src/components/MyPageFive.vue

@@ -0,0 +1,7 @@
+<template>
+    <div class="my-page-five">
+        <slot name="header"></slot>
+        <h1>我是MyPageFive组件</h1>
+        <slot name="footer"></slot>
+    </div>
+</template>

10-vuecli/vueapp/myapp/src/components/MyPageFour.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="my-page-four">
+        <!-- slot插槽标签 可以接收父组件传递过来的html代码 -->
+        
+        <h1>我是子组件的h1标签</h1>
+        <slot></slot>
+        <p>我是子组件的p标签</p>
+    </div>
+</template>
+<script>
+    export default{
+        name:"MyPageFour"        
+    }
+</script>

10-vuecli/vueapp/myapp/src/components/MyPageSix.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="my-page-six">
+        <h1>声明周期函数</h1>
+        <p>{{ str }}</p>
+        <button @click="changeStr">改变字符串</button>
+    </div>
+</template>
+<script>
+    export default{
+        name:"MyPageSix",
+        data(){
+            return{
+                str:"生命周期函数"
+            }
+        },
+        methods:{
+            changeStr(){
+                this.str = "字符串已改变";
+            }
+        },
+        // 生命周期函数 
+        // 生命周期函数是Vue组件在不同阶段会自动调用的函数
+        // 这些函数可以让我们在组件的不同生命周期阶段执行特定的代码
+        // 组件的生命周期函数包括：
+        // beforeCreate: 组件创建之前调用
+        beforeCreate() {
+            console.log("组件创建之前调用");
+        },
+        // created: 组件创建完成后调用
+        created() {
+            console.log("组件创建完成后调用");
+            // 可以在这里进行数据初始化
+            // 从后端获取数据
+        },
+
+
+        // vue中采用了虚拟DOM的概念
+        // 虚拟DOM是Vue在渲染组件时使用的一种优化技术
+        // 虚拟DOM可以提高渲染性能
+        // 虚拟DOM是一个JavaScript对象，它表示组件的结构和内容
+
+        // beforeMount: 组件挂载之前调用
+        beforeMount() {
+            console.log("组件挂载之前调用");
+            // 可以在这里进行DOM操作
+        },
+        // mounted: 组件挂载完成后调用
+        mounted() {
+            console.log("组件挂载完成后调用");
+            // 可以将从后端获取的数据渲染到页面上
+        },
+
+        // beforeUpdate: 组件更新之前调用
+        beforeUpdate() {
+            console.log("组件更新之前调用");
+            // 可以在这里进行DOM操作
+            // 他会在修改data里面的数据之前调用（触发事件了要修改还没改的时候）
+        },
+        // updated: 组件更新完成后调用
+        updated() {
+            console.log("组件更新完成后调用");
+            // 可以在这里进行DOM操作
+            // data数据已经修改完成
+        },
+
+        // beforeDestroy: 组件销毁之前调用
+        beforeDestroy() {
+            console.log("组件销毁之前调用");
+        },
+        // destroyed: 组件销毁完成后调用
+        destroyed() {
+            console.log("组件销毁完成后调用");
+        }
+
+
+    }
+</script>