first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-22/compontent.html
+++ b/历届学生/front-end-team-10/项目练习/学生项目/韩孟雪/2023-3-22/compontent.html
@@ -0,0 +1,129 @@
+<!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>component</title>
+</head>
+
+<body>
+    <div class="app">
+        <h2>Vue</h2>
+        <p_header :t="header_text" @change="getChildren" v-slot:back>
+        </p_header>
+        <div class="content">
+            <swiper :arr="swiper" @change="gofo">
+                <template v-slot:default="{v}">
+                    <img :src="v.img" alt="">
+                </template>
+            </swiper>
+        </div>
+        <div>Vue组件</div>
+        <p_footer>
+            <template v-slot:icon>
+                <a href="">测试</a>
+            </template>
+        </p_footer>
+    </div>
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
+<script>
+    var swiper = {
+        template: `
+        <div class="swiper">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide" v-for="v,i in arr" @click="typeClick(v,i)">
+                    <slot :v="v"></slot>
+                </div>
+                </div>
+        </div>
+        `,
+        data() {
+            return {}
+        },
+        props:{
+            arr:{
+                default:() => [],
+                type:String
+            }
+        },
+        methods: {
+
+        }
+    }
+    // 为什么组件内部的data必须是一个方法？？
+    // 组件名称 即 标签名
+    //  注意：组件名不能和html的标签名一样
+    Vue.component('p_header', {
+        template: `<div class="active">
+                        <h2 @click="test">公共头部:{{ arr }}</h2>
+                    </div>`,
+        // props:["t"],
+        props: {
+            arr:{
+                //数组默认值只能是方法返回空数组
+                default: () => [],
+                type:Array
+            }
+        },
+        data() {
+            return {
+                text: '头部'
+            }
+        },
+        methods: {
+            test() {
+                this.$emit('change', this.text)
+            }
+        }
+    });
+    Vue.component('p_footer', {
+        template: `<div class="footer">
+            <slot name="back"></slot>
+                <h1>公共底部{{ text }}</h1>
+                <slot name="icon"></slot>
+        </div>
+        `,
+        $emit: {
+            t: {
+                default: '$emit默认值',
+                type: String
+            }
+        },
+        data() {
+            return {
+                text: '底部'
+            }
+        },
+        methods: {}
+    })
+    new Vue({
+        el: '.app',
+        data: {
+            header_text: '父组件传给子组件的标题',
+            swiper: [
+                { id: 1, img: 'https://img.alicdn.com/imgextra/i4/6000000000247/O1CN016OonHt1DhAeHc2POy_!!6000000000247-2-octopus.png' },
+                { id: 2, img: 'https://img.alicdn.com/imgextra/i4/6000000004607/O1CN01iyHGBo1ju3Ueo5MZr_!!6000000004607-0-octopus.jpg' },
+                { id: 3, img: 'https://img.alicdn.com/imgextra/i1/6000000002571/O1CN011s3nON1UrZ6i7EyPo_!!6000000002571-0-octopus.jpg' },
+            ]
+        },
+        methods: {
+            getChildren(res) {
+                console.log(res);
+            },
+            gofo(res) {
+                console.log("进详情");
+            },
+            fangda() {
+                console.log("放大");
+            }
+        },
+        components: {
+            swiper
+        }
+    })
+</script>
+
+</html>