vue

vue/vue高阶/comm/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "core-js": "^3.8.3",
     "pubsub-js": "^1.9.4",
     "vue": "^2.6.14"

vue/vue高阶/comm/src/App.vue

@@ -2,65 +2,111 @@
   <div class="app">
     <h1>组件通信</h1>
     <Demo1 ref="getMain"></Demo1>
-    <hr>
+    <hr />
     <Demo2 :name="a" sex="女" :age="10"></Demo2>
-    <hr>
+    <hr />
     <Demo3 @getName="getName"></Demo3>
-    <hr>
+    <hr />
     <Demo4></Demo4>
-    <hr>
+    <hr />
     <Demo5></Demo5>
-    <hr>
+    <hr />
     <Demo6></Demo6>
-    <hr>
+    <hr />
     <Demo7></Demo7>
+    <hr />
+    <Demo8>
+      <!-- 默认插槽 -->
+      <slot></slot>
+    </Demo8>
+    <hr />
+    <Demo9>
+      <template v-slot:header>
+        <slot>哈哈哈</slot>
+      </template>
+      <template #footer>
+        <slot>哒哒哒</slot>
+      </template>
+      <template #default>
+        <slot>呵呵呵</slot>
+      </template>   
+    </Demo9>
+    <hr />
+    <Demo10>
+      <template v-slot="data">
+      <slot>{{ data.obj.description }}</slot>
+      </template>
+    </Demo10>
+    <hr />
+    <Demo11 title="综合演示">
+      <template v-slot:main="{holiday1}" >
+        <slot>
+          <div  v-for="(item,index) in holiday1" :key="index">
+            {{item}}
+          </div>
+        </slot>
+      </template>
+      <template #default>
+        <slot>就不告诉你</slot>
+      </template>
+    </Demo11>
+    <hr>
+    <Demo12></Demo12>
   </div>
 </template>
 <script>
-  import Demo1 from './components/Demo1.vue'
-  import Demo2 from './components/Demo2.vue'
-  import Demo3 from './components/Demo3.vue'
-  import Demo4 from './components/Demo4.vue'
-  import Demo5 from './components/Demo5.vue'
-  import Demo6 from './components/Demo6.vue'
-  import Demo7 from './components/Demo7.vue'
-  export default {
-    data() {
-      return {
-        msg:"哈哈哈哈",
-        a: '小李'
-      }
-    },
-    components:{
-      Demo1,
-      Demo2,
-      Demo3,
-      Demo4,
-      Demo5,
-      Demo6,
-      Demo7
-    },
-    methods:{
-      ab() {
-        console.log("明天休息",this.msg);
-      },
-      getName(name) {
-        console.log("我叫"+name)
-      }
+import Demo1 from "./components/Demo1.vue";
+import Demo2 from "./components/Demo2.vue";
+import Demo3 from "./components/Demo3.vue";
+import Demo4 from "./components/Demo4.vue";
+import Demo5 from "./components/Demo5.vue";
+import Demo6 from "./components/Demo6.vue";
+import Demo7 from "./components/Demo7.vue";
+import Demo8 from "./components/Demo8.vue";
+import Demo9 from "./components/Demo9.vue";
+import Demo10 from "./components/Demo10.vue";
+import Demo11 from "./components/Demo11.vue";
+import Demo12 from "./components/Demo12.vue";
+export default {
+  data() {
+    return {
+      msg: "哈哈哈哈",
+      a: "小李",
+    };
+  },
+  components: {
+    Demo1,
+    Demo2,
+    Demo3,
+    Demo4,
+    Demo5,
+    Demo6,
+    Demo7,
+    Demo8,
+    Demo9,
+    Demo10,
+    Demo11,
+    Demo12
+  },
+  methods: {
+    ab() {
+      console.log("明天休息", this.msg);
     },
-    mounted() {
-      /**
-       * on     绑定上
-       * emit   监听
-       * off    解绑
-       * */
-      this.$refs.getMain.$on('aa',this.ab)
+    getName(name) {
+      console.log("我叫" + name);
     },
-    destroyed() {
-      this.$refs.getMain.$off('aa',this.ab)
-    }
-  }
+  },
+  mounted() {
+    /**
+     * on     绑定上
+     * emit   监听
+     * off    解绑
+     * */
+    this.$refs.getMain.$on("aa", this.ab);
+  },
+  destroyed() {
+    this.$refs.getMain.$off("aa", this.ab);
+  },
+};
 </script>
-<style scoped>
-
-</style>
+<style scoped></style>

vue/vue高阶/comm/src/components/Demo10.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="demo10">
+    组件十:作用域插槽
+    <slot :obj="obj">{{obj.name}}</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      obj: {
+        name:"LiLi",
+        description: "明天休息了"
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

vue/vue高阶/comm/src/components/Demo11.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="demo11">
+    组件11
+    <h2>{{title}}</h2>
+    <p>这是一段话这是一段话这是一段话这是一段话这是一段话</p>
+    <slot name="main" :holiday1="holiday"></slot>
+    <h3>撒花撒花撒花撒花撒花撒花</h3>
+    <slot>尾部</slot>
+  </div>
+</template>
+
+<script>
+export default {
+    props:['title'],
+    data() {
+        return {
+            holiday:[
+                '中秋',
+                '国庆',
+                '元旦',
+                '春节',
+                '清明',
+                '端午',
+            ]
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

vue/vue高阶/comm/src/components/Demo12.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="demo12">
+    组件12
+    <hr>
+    <div class="box" v-for="(item,index) in list" :key='index'>
+        <h4>{{item.title}}</h4>
+        <div class="main">
+            <div class="contain" v-for="(item1,index1) in item.productDtoList" :key="index1">
+                <img :src="item1.pic">
+                <p>{{item1.prodName}}</p>
+            </div>
+        </div>
+    </div>  
+  </div>
+</template>
+
+<script>
+// npm install axios
+import axios from 'axios';
+// http://shop-api.edu.koobietech.com/prod/tagProdList
+export default {
+    data() {
+        return {
+            list:[]
+        }
+    },
+    created() {
+        this.init();
+    },
+    methods: {
+        init() {
+            /**
+             * Promise().then().catch()
+             */
+            axios.get("http://shop-api.edu.koobietech.com/prod/tagProdList").then(res => {
+                this.list = res.data.data;
+                console.log(this.list,'成功');
+            }).catch(err => {
+                console.log(err,'失败');
+            })
+        }
+    }
+
+}
+</script>
+ 
+<style scoped>
+.main {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+.main .contain {
+    width: 100px;
+    height: 200px;
+}
+.main .contain img {
+    width: 100px;
+    height: 100px;
+}
+.main .contain p {
+    width: 100px;
+    overflow: hidden;
+    /* white-space: nowrap; */
+    text-overflow: ellipsis;
+    -webkit-line-clamp:2;
+    display: -webkit-box;
+  -webkit-box-orient: vertical;
+    font-size: 13px;
+}
+</style>

vue/vue高阶/comm/src/components/Demo8.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="demo8">
+    组件八
+    <h3>++++++++插槽++++++++</h3>
+    <hr>
+    <p>今天下雨了</p>
+    <slot>1111</slot>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

vue/vue高阶/comm/src/components/Demo9.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="demo9">
+    组件九
+    <slot name="header">333</slot>
+    <h3>++++++++具名插槽++++++++</h3>
+    <hr>
+    <slot>222</slot>
+    <p>今天下雨了</p>
+    <slot name="footer">1111</slot>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

vue/vue高阶/comm/yarn.lock

@@ -2021,6 +2021,11 @@ async@^2.6.4:
   dependencies:
     lodash "^4.17.14"
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
 at-least-node@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
@@ -2038,6 +2043,15 @@ autoprefixer@^10.2.4:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+axios@^1.7.2:
+  version "1.7.2"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.7.2.tgz#b625db8a7051fbea61c35a3cbb3a1daa7b9c7621"
+  integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-loader@^8.2.2:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.3.0.tgz#124936e841ba4fe8176786d6ff28add1f134d6a8"
@@ -2405,6 +2419,13 @@ colorette@^2.0.10:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -2757,6 +2778,11 @@ define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -3351,11 +3377,20 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.15.6:
   version "1.15.6"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
   integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -4244,7 +4279,7 @@ mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -5014,6 +5049,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"