first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/fontendsix/每日课程/2021-11-22/组件.html
+++ b/历届学生/fontendsix/每日课程/2021-11-22/组件.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <div class="app">
+        <lb-header :title="str"></lb-header>
+
+        <lb-button @more="alertOne"></lb-button>
+        <h2 ref="nihao">测试标签</h2>
+
+
+        <lb-button @more="alertTwo"></lb-button>
+
+        <lb-header title="详情页的头部">
+
+            <template v-slot:left>
+                <i>我是图标left</i>
+             </template>
+
+            <template v-slot:right>
+               <i>我是图标right</i>
+            </template>
+            
+        </lb-header>
+
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+<script>
+    // 组件
+    // 生命周期
+    // 
+    //   全局组件  在项目的任何一个页面都可以随意使用
+    //   ref
+    //   局部组件  只有某个页面可以使用
+      // 1 定义局部组件
+    var button_a = {
+        template: `
+          <div>局部组件  </div>
+        `,
+        data() {
+            return {
+            }
+        },
+        methods: {},
+    }
+
+    Vue.component('lb-header', {
+        template: `
+          <div>
+            <div class="left">
+                <slot name="left"></slot>
+            </div>
+            <h2>{{ title }}</h2>
+            <div class="right">
+                <slot name="right"></slot>
+            </div>
+          </div>
+        `,
+        // props: [ 'title' ],
+        props: {
+            title: {
+                type: String,
+                default: '默认标题'
+            }
+        },
+        data() {
+            return {
+                headerText: '我的公共头部'
+            }
+        },
+        methods: {
+
+        }
+    })
+  
+    
+    Vue.component('lb-button', {
+        template: `
+          <button @click="but_click">
+            点我
+            <lb-c></lb-c>
+          </button>
+        `,
+        data() {
+            return {
+                aaa: '11111'
+            }
+        },
+        methods: {
+            but_click() {
+                // 2 
+                console.log(this.$root.$children[3].$props.title="哈哈是受到很多很多很好的");
+                this.$emit("more", "1111")
+            }
+        },
+        // 2 注册局部组件
+        components: {
+            "lb-c":button_a
+        }
+    });
+
+    
+
+    
+    // 父子组件的数据传递
+    //     父 --> 子  props    provide / inject
+    //     子 --> 父  $emit
+    //     传html  用插槽
+    //             别名插槽
+    //             作用域插槽 (搞不明白没关系)
+    // 兄弟关系 
+    //  1: 子1 $emit 提交数据给父组件，然后父组件通过props传给子2
+    //  2: this.$parent  $root 等实现
+    //  3: provide / inject
+    new Vue({
+        el: '.app',
+        data: {
+            str: '',
+        },
+        beforeCreate() {
+           console.log(this);
+        },
+        created() {
+            this.getIndex();
+            console.log(this.$refs.nihao);
+        },
+        methods: {
+            alertOne(res){
+                console.log(res);
+                this.str = res;
+                alert(1)
+            },
+            alertTwo(res){
+                console.log(res);
+                alert(2)
+            },
+            getIndex() {
+                console.log("getIndex");
+            }
+        }
+    })
+</script>
+</html>