first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/罗朝/2019-05-15/组件.html
+++ b/历届学生/罗朝/2019-05-15/组件.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>组件</title>
+  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+</head>
+<body>
+  
+
+  <div id="app">
+
+    <lb-children @father-enent="fatherClick" :wdfewefe="msg"></lb-children>
+
+
+    <div class="content">主体内容</div>
+
+
+
+    <lb-footer></lb-footer>
+
+ 
+  </div>
+
+  <script>
+    // 父组件可以向子组件通过 props传递数据
+    // 但是 反过来 子组件 没有办法直接访问或者修改父组件里面的任何数据
+    // 子组件需要通过事件向父组件提交数据
+
+    // 1：局部注册组件
+    // 1 先定义
+    // 2: 在Vue里面挂载一下
+
+
+    var children = {
+      props: [ "wdfewefe" ],
+      template: `
+                  <div class="footer">
+                    <ul>
+                      <li v-for="item in wdfewefe">
+                        <img :src="item.url" alt="">
+                        <p>{{ item.title }}</p>
+                      </li>
+                    </ul>
+                    <button @click="submit()">点我</button>
+                  </div>`,
+      data() {
+        return {
+          titlejubu: '局部注册组件'
+        }
+      },
+      methods: {
+        alerts() {
+          alert("局部注册")
+        },
+        submit() {
+          this.$emit("father-enent","我是子组件")
+        }
+      },
+    }
+
+    // // 2: 全局注册组件
+    // Vue.component("lb-footer",{
+    //   data () {
+    //     return {
+    //       list: [
+    //         { url: './img/book.png',title: '书架' },
+    //         { url: './img/chat.png',title: '书城' },
+    //         { url: './img/man.png',title: '' },
+    //         { url: './img/music.png',title: '轻音乐' },
+    //         { url: './img/user.png',title: '我的' }
+    //       ]
+    //     }
+    //   },
+    //   template: `<div class="footer">
+    //                 <ul>
+    //                   <li v-for="item in list">
+    //                     <img :src="item.url" alt="">
+    //                     <p>{{ item.title }}</p>
+    //                   </li>
+    //                 </ul>
+    //               </div>`
+    // })
+
+    new Vue({
+      el: '#app',
+      data: {
+        msg: [
+            { url: './img/book.png',title: '书架' },
+            { url: './img/chat.png',title: '书城' },
+            { url: './img/man.png',title: '' },
+            { url: './img/music.png',title: '轻音乐' },
+            { url: './img/user.png',title: '我的' }
+        ]
+      },
+      methods: {
+        fatherClick(res) {
+          console.log(res)
+        }
+      },
+      components : {
+        'lb-children': children
+      }
+    })
+  </script>
+
+</body>
+</html>