Home Explore Help
Sign In
lovecoding
/
Web1020
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 3 months ago
parent
251c5f9cb8
commit
7b69e90f99
6 changed files with 299 additions and 0 deletions
Split View Show Diff Stats
  1. 0 0
      11_Vue基础/21_components_组件传参.html
  2. 77 0
      11_Vue基础/22_components_组件向外部穿参.html
  3. 58 0
      11_Vue基础/23_components_slot.html
  4. 44 0
      11_Vue基础/24_components_组件嵌套.html
  5. 31 0
      11_Vue基础/25_components_is.html
  6. 89 0
      11_Vue基础/26_components_声明周期.html

+ 0 - 0
11_Vue基础/21_components_组件穿参.html → 11_Vue基础/21_components_组件传参.html
View File


+ 77 - 0
11_Vue基础/22_components_组件向外部穿参.html
View File 

@@ -0,0 +1,77 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+    <style>
 
+        .box {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin: 10px;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <box v-on:comhandle="parentHandle" val="helloworld"></box>
 
+        <!-- <box v-bind:val="str"></box> -->
 
+        <h1>文本框里面的值:{{childVal}}</h1>
 
+    </div>
 
+
 
+    <template id="box-temp">
 
+        <div class="container">
 
+            <div class="box">
 
+                <span>{{val}}</span>
 
+                <input type="text" v-model="num">
 
+                <button @click="emitVal">传参</button>
 
+            </div>
 
+        </div>
 
+    </template>
 
+   
+    <script>
 
+        let app = new Vue({
 
+            el: '#app',
 
+            data: {
 
+                str:"lovecoding",
 
+                childVal:""
 
+            },
 
+            methods: {
 
+                parentHandle(i) {
 
+                    this.childVal = i;
 
+                    console.log("父组件接收到了子组件的参数",i);
 
+                }
 
+            },
 
+            components: {
 
+                box: {
 
+                    template: "#box-temp",
 
+                    // 组件内部的data是个函数 内部返回一个对象
 
+                    data() {
 
+                        return{
 
+                            num:""
 
+                        }
 
+                    },
 
+                    // props用来接受传递进来的参数
 
+                    props:["val"],
 
+                    methods: {
 
+                        box1Handle() {
 
+                            console.log(this.val)
 
+                        },
 
+                        emitVal(){
 
+                            // 通过$emit触发父组件中的自定义事件
 
+                            this.$emit("comhandle",this.num);
 
+                            console.log(this.num)
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 58 - 0
11_Vue基础/23_components_slot.html
View File 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+    <style>
 
+        .box {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin: 10px;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <box>
 
+            <template v-slot:tem1>
 
+                <h1>hello</h1>
 
+                <h2>world</h2>
 
+            </template>
 
+            <template v-slot:tem2>
 
+                <ul>
 
+                    <li>1</li>
 
+                    <li>2</li>
 
+                    <li>3</li>
 
+                </ul>
 
+            </template>
 
+        </box>
 
+    </div>
 
+
 
+    <template id="box-temp">
 
+        <div class="container">
 
+            <slot name="tem1"></slot>
 
+            <div class="box">
 
+                <slot name="tem2"></slot>
 
+            </div>
 
+        </div>
 
+    </template>
 
+   
+    <script>
 
+        let app = new Vue({
 
+            el: '#app',
 
+            components: {
 
+                box: {
 
+                    template: "#box-temp",
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 44 - 0
11_Vue基础/24_components_组件嵌套.html
View File 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <com1></com1>
 
+        <!-- <com2></com2> -->
 
+    </div>
 
+
 
+    <!-- 外层组件 -->
 
+    <template id="com1">
 
+        <div class="container">
 
+            <h1>hello</h1>
 
+            <com2></com2>
 
+        </div>
 
+    </template>
 
+    <!-- 内层组件 -->
 
+     <template id="com2">
 
+        <div class="container">
 
+            <h2>world</h2>
 
+        </div>
 
+     </template>
 
+    <script>
 
+        let app = new Vue({
 
+            el: '#app',
 
+            components:{
 
+                com1:{
 
+                    template:'#com1',
 
+                    components:{
 
+                        com2:{
 
+                            template:'#com2'
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 31 - 0
11_Vue基础/25_components_is.html
View File 

@@ -0,0 +1,31 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <!-- is 用来切换显示的组件 is等于哪个组件名称就展示哪个组件 -->
 
+        <div v-bind:is="comp"></div>
 
+    </div>
 
+    <script>
 
+        var app = new Vue({
 
+            el: '#app',
 
+            data:{
 
+                comp:"box2"
 
+            },
 
+            components: {
 
+                box1:{
 
+                    template: '<div>box1</div>'
 
+                },
 
+                box2:{
 
+                    template: '<div>box2</div>'
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 89 - 0
11_Vue基础/26_components_声明周期.html
View File 

@@ -0,0 +1,89 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <!-- is 用来切换显示的组件 is等于哪个组件名称就展示哪个组件 -->
 
+        <div v-bind:is="comp"></div>
 
+        <button @click="parentHandle">修改组件</button>
 
+    </div>
 
+    <script>
 
+        var app = new Vue({
 
+            el: '#app',
 
+            data:{
 
+                comp:"box1"
 
+            },
 
+            methods: {
 
+                parentHandle(){
 
+                    this.comp = "box2"
 
+                }
 
+            },
 
+            beforeCreate() {
 
+                console.log('父组件 beforeCreate');
 
+            },
 
+            created() {
 
+                console.log('父组件 created');
 
+            },
 
+            beforeMount() {
 
+                console.log('父组件 beforeMount');
 
+            },
 
+            mounted() {
 
+                console.log('父组件 mounted');
 
+            },
 
+            beforeUpdate() {
 
+                console.log('父组件 beforeUpdate');
 
+            },
 
+            updated() {
 
+                console.log('父组件 updated');
 
+            },
 
+            components: {
 
+                box1:{
 
+                    template: '<div @click="childHandle">box1{{num}}</div>',
 
+                    data(){
 
+                        return {
 
+                            num:1
 
+                        }
 
+                    },
 
+                    methods: {
 
+                        childHandle() {
 
+                            this.num++;
 
+                        }
 
+                    },
 
+                    beforeCreate() {
 
+                        console.log('子组件 beforeCreate');
 
+                    },
 
+                    created() {
 
+                        console.log('子组件 created');
 
+                    },
 
+                    beforeMount() {
 
+                        console.log('子组件 beforeMount');
 
+                    },
 
+                    mounted() {
 
+                        console.log('子组件 mounted');
 
+                    },
 
+                    beforeUpdate() {
 
+                        console.log('子组件 beforeUpdate');
 
+                    },
 
+                    updated() {
 
+                        console.log('子组件 updated');
 
+                    },
 
+                    beforeDestroy() {
 
+                        console.log('子组件 beforeDestroy');
 
+                    },
 
+                    destroyed() {
 
+                        console.log('子组件 destroyed');
 
+                    }
 
+                },
 
+                box2:{
 
+                    template: '<div>box2</div>'
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>