diff --git "a/\347\216\213\351\224\246\345\206\233/vue01_vuebase.html" "b/\347\216\213\351\224\246\345\206\233/vue01_vuebase.html"
new file mode 100644
index 0000000000000000000000000000000000000000..245cd3e7bf86a009548d77a35ab1a72eff5f317d
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue01_vuebase.html"
@@ -0,0 +1,82 @@
+<!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>
+    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+    <style>
+        #main{
+            margin: 0 auto;
+            display: flex;
+            width: 64vw;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            /* background-color: aqua; */
+        }
+        .goods{
+            width: 30vw;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            /* background-color: blue; */
+        }
+        img{
+            width: 100%;
+            height: 100%;
+        }
+        p{
+            width:100% ;
+            height: 2.8vw;
+            line-height: 2.8vw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    </style>
+</head>
+<!-- ### 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->
+
+<body>
+    <div id="main">
+        
+       <div class="goods">
+        <img v-bind:src=urlImg[0] alt="">
+        <p>{{text[0]}}</p>
+        <span>￥{{price[0]}}</span>
+       </div>
+       <div class="goods">
+        <img v-bind:src=urlImg[1] alt="">
+        <p>{{text[1]}}</p>
+        <span>￥{{price[1]}}</span>
+       </div>
+       <div class="goods">
+        <img v-bind:src=urlImg[2] alt="">
+        <p>{{text[2]}}</p>
+        <span>￥{{price[2]}}</span>
+       </div>
+
+    </div>
+</body>
+<script>
+
+    let goodsModel = {
+
+        data() {
+            return {
+                urlImg: ["https://gw.alicdn.com/bao/uploaded/i4/2160134447/O1CN01n4K9ci1iiltEAP1S5_!!0-item_pic.jpg_320x320q90.jpg_.webp", "https://gw.alicdn.com/bao/uploaded/i2/299247819/O1CN01lzxGsN27d9Y2bKR4G_!!0-item_pic.jpg_320x320q90.jpg_.webp","https://gw.alicdn.com/bao/uploaded/i3/2074305857/O1CN01s2CfW91t8Ya8WT7Y4_!!2-item_pic.png_320x320q90.jpg_.webp"],
+                text: ["河岸红山楂片1000g独立包装山楂干山东新鲜山楂果宝宝休闲小零食", "【张裕官方】 红酒单瓶  特选级圆筒 多名利赤霞珠干红葡萄酒","绿箭无糖薄荷糖约35粒单盒装单件包邮多件多折清新口气薄荷糖零食"],
+                price: [23.9, 69,9.9],
+                
+            }
+        },
+    }
+
+    let app = Vue.createApp(goodsModel)
+    app.mount("#main")
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_02_\345\217\214\345\220\221\347\273\221\345\256\232.html" "b/\347\216\213\351\224\246\345\206\233/vue_02_\345\217\214\345\220\221\347\273\221\345\256\232.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d58250440bf9ed7d3f8e591b12776d3820cf160b
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_02_\345\217\214\345\220\221\347\273\221\345\256\232.html"
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!-- 在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
+    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+    <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>goodslist</title>
+    <style>
+        #main {
+            margin: 0 auto;
+            display: flex;
+            width: 64vw;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            /* background-color: aqua; */
+        }
+
+        .goods {
+            width: 30vw;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            /* background-color: blue; */
+        }
+        .pl{
+            width: 30vw;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        .soldout h2{
+            
+            width: 30vw;
+            height: 10vw;
+            margin: 0 auto;
+            background-color: rgba(240, 58, 94, 0.788);
+        }
+       
+        img {
+            width: 100%;
+            height: 100%;
+        }
+
+        p {
+            width: 100%;
+            height: 4vw;
+            font-size:2vw;
+            line-height: 3vw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>商品列表</h1>
+    <div id="main">
+        <div v-for="(item,index) in goodslist" class="goods">
+            <div class="pl" v-if="item.goodsNum">
+            <img v-bind:src=item.urlImg>
+            <p>{{item.title}}</p>  <span>库存: {{item.goodsNum}}</span> 
+          <div> 选购数量: <input v-model="item.changeval" type="text" @input="change"></div>  
+            <span>{{item.price}}</span>
+            </div>
+            <div class="soldout" v-else>
+               <h2>♥啊哦,此商品已销售光^_^~♥</h2> 
+            </div>
+        </div>
+</body>
+<script>
+    let goodsModel = {
+
+    data() {
+            return {
+
+        goodslist: [{
+                        urlImg:"https://gw.alicdn.com/bao/uploaded/i4/2160134447/O1CN01n4K9ci1iiltEAP1S5_!!0-item_pic.jpg_320x320q90.jpg_.webp",
+                        title:"河岸红山楂片1000g独立包装山楂干山东新鲜山楂果宝宝休闲小零食",
+                        goodsNum:10,
+                        changeval:"0",
+                        price:"￥23.9"
+                },
+                {
+                    urlImg:"https://gw.alicdn.com/bao/uploaded/i2/299247819/O1CN01lzxGsN27d9Y2bKR4G_!!0-item_pic.jpg_320x320q90.jpg_.webp",
+                        title:"【张裕官方】 红酒单瓶  特选级圆筒 多名利赤霞珠干红葡萄酒",
+                        goodsNum:100,
+                        changeval:"0",
+                        price:"￥69"
+                },
+                {
+                    urlImg:"https://gw.alicdn.com/bao/uploaded/i3/2074305857/O1CN01s2CfW91t8Ya8WT7Y4_!!2-item_pic.png_320x320q90.jpg_.webp",
+                        title:"绿箭无糖薄荷糖约35粒单盒装单件包邮多件多折清新口气薄荷糖零食",
+                        goodsNum:100,
+                        changeval:"0",
+                        price:"￥9.9"
+                }
+                ]
+            }
+        },
+        methods:{
+          change:function (){
+          for (let val of this.goodslist) {
+            //需大于求
+              val.goodsNum=val.goodsNum-Number(val.changeval)<0?0:(val.goodsNum-Number(val.changeval));
+          }
+          }
+        }
+    }
+
+    let app = Vue.createApp(goodsModel)
+    app.mount("#main")
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_03_\344\272\213\344\273\266.html" "b/\347\216\213\351\224\246\345\206\233/vue_03_\344\272\213\344\273\266.html"
new file mode 100644
index 0000000000000000000000000000000000000000..886f21000893689d2d569b8253dbbb3e3f1822d0
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_03_\344\272\213\344\273\266.html"
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!--1. 在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
+    <!--2. 作业： 上一节课基础上，添加  新增 和 删除的按钮,点新增 会加入对应的一条数据，点删除删除对应的商品 -->
+    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+    <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>goodslist</title>
+    <style>
+        #main {
+            margin: 0 auto;
+            display: flex;
+            width: 64vw;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            /* background-color: aqua; */
+        }
+
+        .goods {
+            width: 30vw;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            /* background-color: blue; */
+        }
+        .pl{
+            width: 30vw;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        .soldout h2{
+            
+            width: 30vw;
+            height: 10vw;
+            margin: 0 auto;
+            background-color: rgba(240, 58, 94, 0.788);
+        }
+       
+        img {
+            width: 100%;
+            height: 100%;
+        }
+
+        p {
+            width: 100%;
+            height: 4vw;
+            font-size:2vw;
+            line-height: 3vw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>商品列表</h1>
+    <div id="main">
+        <div v-for="(item,index) in goodslist" class="goods">
+            <div class="pl" v-if="item.goodsNum">
+            <img v-bind:src=item.urlImg>
+            <p>{{item.title}}</p>  <span>库存: {{item.goodsNum}}</span> 
+          <div> 选购数量: <input v-model="item.changeval" type="text" @input="change"> <button v-bind:gid=item.gid  @click="addgoods(index)">新增</button> <button v-bind:gid=item.gid @click="deletegoods(index)">删除</button> </div>  
+            <span>{{item.price}}</span>
+            </div>
+            <div class="soldout" v-else>
+               <h2>♥啊哦,此商品已销售光^_^~♥</h2> 
+            </div>
+        </div>
+</body>
+<script>
+    let goodsModel = {
+
+    data() {
+            return {
+
+        goodslist: [{
+                        gid:0,
+                        urlImg:"https://gw.alicdn.com/bao/uploaded/i4/2160134447/O1CN01n4K9ci1iiltEAP1S5_!!0-item_pic.jpg_320x320q90.jpg_.webp",
+                        title:"河岸红山楂片1000g独立包装山楂干山东新鲜山楂果宝宝休闲小零食",
+                        goodsNum:5,
+                        changeval:"0",
+                        price:"￥23.9"
+                },
+                {       gid:1,
+                        urlImg:"https://gw.alicdn.com/bao/uploaded/i2/299247819/O1CN01lzxGsN27d9Y2bKR4G_!!0-item_pic.jpg_320x320q90.jpg_.webp",
+                        title:"【张裕官方】 红酒单瓶  特选级圆筒 多名利赤霞珠干红葡萄酒",
+                        goodsNum:100,
+                        changeval:"0",
+                        price:"￥69"
+                },
+                {       gid:2,
+                        urlImg:"https://gw.alicdn.com/bao/uploaded/i3/2074305857/O1CN01s2CfW91t8Ya8WT7Y4_!!2-item_pic.png_320x320q90.jpg_.webp",
+                        title:"绿箭无糖薄荷糖约35粒单盒装单件包邮多件多折清新口气薄荷糖零食",
+                        goodsNum:100,
+                        changeval:"0",
+                        price:"￥9.9"
+                }
+                ]
+            }
+        },
+        methods:{
+          change:function (){
+          for (let val of this.goodslist) {
+            //需大于求
+              val.goodsNum=val.goodsNum-Number(val.changeval)<0?0:(val.goodsNum-Number(val.changeval));
+          }
+          },
+          addgoods:function(index){
+           this.goodslist.push(this.goodslist[index])  
+              
+          }
+          ,
+          deletegoods:function(index){
+            this.goodslist.splice(index,1)
+          }
+        }
+    }
+
+    let app = Vue.createApp(goodsModel)
+    app.mount("#main")
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/api/app.js" "b/\347\216\213\351\224\246\345\206\233/vue_axios/api/app.js"
new file mode 100644
index 0000000000000000000000000000000000000000..f98e10ef91fef11a38fd27af10ad0a35c16d6195
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/api/app.js"
@@ -0,0 +1,35 @@
+const express = require('express');
+const bodyParser = require('body-parser');
+const cors = require('cors');
+const app = express();
+app.use(cors());
+
+let mockdb={}
+app.use((req, res, next) => {
+    res.setHeader('Content-Type', 'text/html; charset=utf-8');
+    next();
+  });
+
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: true }));
+
+app.post("/goods",(req,res)=>{
+    const products = [
+        {img:"https://gw.alicdn.com/bao/uploaded/i1/3450653793/O1CN011kNQeq1dtF5Y3Uq8P_!!3450653793.jpg_300x300q90.jpg_.webp",des:"甜美可爱lolita蝴蝶结挂脖连衣裙女春夏爱心网纱洋装洛丽塔公主裙",price:"￥168",num:0},
+        {img:"https://gw.alicdn.com/bao/uploaded/i4/2200799283113/O1CN012puGzP1YrngbtYT51_!!0-item_pic.jpg_300x300q90.jpg_.webp",des:"适用iwatch表带苹果手表applewatch6代7SE5/4/3/2/1代潮牌卡通硅胶运动44mm42女38mm40通用iphoneseries6表带",price:"￥38",num:0},
+        {img:"https://gw.alicdn.com/bao/uploaded/i1/2209918180861/O1CN01uFPCKJ1IENokSlWIy_!!2209918180861.jpg_300x300q90.jpg_.webp",des:"超凡蜘蛛侠紧身衣正版成人高级战衣蜘蛛侠衣服儿童连体套装迈尔斯",price:"￥100",num:0}
+      ];
+      res.end(JSON.stringify(products))
+})
+
+app.post("/getgoods",(req,res)=>{
+  let getgoods=req.body
+  mockdb=getgoods;
+  console.log(getgoods);
+  res.end(JSON.stringify(mockdb))
+  
+})
+app.post("/apigoods",(req,res)=>{
+  res.end(JSON.stringify(mockdb))
+})
+app.listen(2222)
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/index.html" "b/\347\216\213\351\224\246\345\206\233/vue_axios/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..99f583aa2b835f6885f2c233a0e1f6d395fa42af
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/index.html"
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/App.vue" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ef6872310a80fe7828649dd4b404ccf6bc532a1d
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/App.vue"
@@ -0,0 +1,16 @@
+<script setup>
+import { RouterLink, RouterView } from 'vue-router'
+// ### 作业：写一个商品列表接口，再写个商品详情接口，结合之前的购物车，结算时把购物车的数据提交到接口里面（可以mock最好自己写接口）
+</script>
+
+<template>
+  <router-view v-slot="{ Component }">
+    <keep-alive include="goods">
+      <component :is="Component" />
+    </keep-alive>
+  </router-view>
+</template>
+
+<style scoped>
+
+</style>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/HelloWorld.vue" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/HelloWorld.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..0a0988bcb91e4e3d0a442215f11ca79579d6b63e
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/HelloWorld.vue"
@@ -0,0 +1,43 @@
+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/TheWelcome.vue" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/TheWelcome.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..5e6462538ecda2ce6758b16fcbbf6e2e40f5d683
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/TheWelcome.vue"
@@ -0,0 +1,86 @@
+<script setup>
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+    you need to test your components and web pages, check out
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
+    <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
+
+    <br />
+
+    More instructions are available in <code>README.md</code>.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
+    Discord server, or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also subscribe to
+    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
+    the official
+    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    twitter account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/WelcomeItem.vue" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/WelcomeItem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a5eca70f81855b06fe4a9ba461f20fc4b9a049b7
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/WelcomeItem.vue"
@@ -0,0 +1,85 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconCommunity.vue" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconDocumentation.vue" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconEcosystem.vue" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconSupport.vue" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconTooling.vue" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/main.js" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..9bb171cf48bd3e20c3a0a8eebfa3d23c9f6d56ea
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/main.js"
@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/router/index.js" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..35ce374169854b0155a1fe94cfb03c78b00b9d1d
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/router/index.js"
@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import goods from "@/views/goods.vue"
+import car from "@/views/car.vue"
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: goods
+    },
+    {
+      path: '/car',
+      name: 'car',
+      component: car
+    }
+  ]
+})
+
+export default router
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/utils/axiosquest.js" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/utils/axiosquest.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2197b44d127c0fdfdace52bfa97f3790be6f0259
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/utils/axiosquest.js"
@@ -0,0 +1,12 @@
+import axios from "axios"
+
+const instance = axios.create({
+    baseURL: "http://localhost:2222"
+})
+
+instance.interceptors.response.use(function (response) {
+    console.log(response);
+    return response.data;
+})
+
+export default instance
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/views/car.vue" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/views/car.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..42f18254fa3eedc2e6b510445a7d8a03fdabd566
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/views/car.vue"
@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <div v-for="item,index in list.goodslist ">
+            <div>{{index}}</div>
+            <p>{{item}}</p>
+        </div>
+    </div>
+</template>
+<script setup>
+import { useRoute, useRouter } from 'vue-router';
+import { reactive } from 'vue';
+import instance from '../utils/axiosquest';
+let name="car";
+let route=useRoute()
+let router=useRouter()
+let goods={}
+async function getapigoods(){
+    goods=await instance.post("/apigoods")
+    
+}
+getapigoods()
+
+let sumlist=localStorage.getItem("goods")
+//记得要用响应式数据--核心
+
+let list=reactive({ 
+    goodslist:{}
+}) 
+
+setTimeout(()=>{
+//第一次
+if(sumlist==null){
+    for (const key in goods) {
+        list.goodslist[key]=goods[key]
+}
+}
+//第二次
+else{
+    for (const key in goods) {
+         list.goodslist[key]=parseInt(goods[key]) + parseInt(JSON.parse(sumlist)[key] )  
+}
+}
+localStorage.setItem("goods",JSON.stringify(list.goodslist))
+},100)
+
+
+
+
+
+
+
+</script>
+<style>
+    
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_axios/src/views/goods.vue" "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/views/goods.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..5acbfcd4492e67dda38f1d6421b73de5c7eebb5b
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_axios/src/views/goods.vue"
@@ -0,0 +1,90 @@
+<template>
+    <div class="main">
+        <div v-for="item, index in rea.goodslist">
+            <img :src="item.img" alt="">
+            <p>{{ item.des }}</p>
+            <div>
+                <span>{{ item.price }}</span>
+            </div>
+            购买数量: <input type="number" v-model="item.num">
+
+        </div>
+        <input type="submit" value="去结算" id="sub" @click="rea.tocar">
+    </div>
+</template>
+
+<script setup>
+
+import { reactive,watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import instance from '../utils/axiosquest';
+let name = "goods";
+let router = useRouter()
+
+let rea = reactive({
+    goodslist: [
+
+    ],
+    arrnum:{},
+    tocar: function () {
+         rea.goodslist.forEach( element => {
+            rea.arrnum[element.des] = element.num
+        });
+            rea.postdata(rea.arrnum)
+        router.push({ path: "/car"})
+    },
+
+    async getdata() {
+        await instance.post("/goods").then((data) => {
+            rea.goodslist = data
+            
+        })
+
+    },
+    async postdata(data){
+        let params= new URLSearchParams()
+        //method1 核心注意点就是只能一条一条append，不能整个对象直接存！！！
+        for (let key in data) {
+            params.append(key,data[key])
+        }                                   
+        //method2 : Object.keys(data).forEach(key => params.append(key, data[key]));
+        //method3 : params.append("getgoods",JSON.stringify(data))
+        let result=await instance.post("/getgoods",params)
+        console.log(result);
+    }
+})
+
+
+rea.getdata()
+
+setTimeout(()=>{
+    watch(rea.goodslist,function(){
+        for (let val of rea.goodslist) {
+            if(val.num<0&&typeof(val.num)=="number"){
+                val.num=0
+            }
+        }
+    }
+    )
+},500)
+
+
+
+</script>
+<style scoped>
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.main {
+    width: 500px;
+    margin: 0 auto;
+}
+
+#sub {
+    width: 100px;
+    height: 50px;
+    margin-left: 500px;
+}
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/index.html" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..762871300c5d82f39504a3954d62f5e48fbf7399
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/index.html"
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="shortcut icon" href="./public/img/kk.jpg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>坤坤后台系统</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/favicon.ico" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/favicon.ico" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/heizi01.jpeg" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/heizi01.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..2b2ee91f420890d0baed111edf5303f0da82e38a
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/heizi01.jpeg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/heizi02.jpg" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/heizi02.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..16f139f127da0534ec86a466253dfbc5f0719fc8
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/heizi02.jpg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/heizi03.jpg" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/heizi03.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..595edc0cfb344d08a37261226fa1374e80c9cfc4
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/heizi03.jpg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/ikun01.jpeg" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/ikun01.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..3c88b7851b1be9711794c66c99571b37b88edfc2
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/ikun01.jpeg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/ikun02.jpg" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/ikun02.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e9b8f49946b3ebbcff8a527e2c9f42d19f64e2d2
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/ikun02.jpg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/ikun03.jpeg" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/ikun03.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..3d1332faae02d33d69d34bea80339fc2f6bcedb1
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/ikun03.jpeg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/kk.jpg" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/kk.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..dac3190572045c6a1b789c7754b19ce793e9771b
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/public/img/kk.jpg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/App.vue" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..9aa9f187f71986d65611ebeffdb4777a5f126cfb
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/App.vue"
@@ -0,0 +1,78 @@
+<script>
+import slotvue from './components/slot.vue';
+
+export default {
+  data: function () {
+    return {
+      kunlist: [{ title: "kun01", url: "../public/img/ikun01.jpeg" },
+      { title: "kun02", url: "../public/img/ikun02.jpg" },
+      { title: "kun03", url: "../public/img/ikun03.jpeg" }
+      ],
+      blackkun: [{ title: "黑子01", url: "../public/img/heizi01.jpeg" },
+      { title: "黑子02", url: "../public/img/heizi02.jpg" },
+      { title: "黑子03", url: "../public/img/heizi03.jpg" }
+      ],
+    
+    }
+  },
+  components: {
+    slotvue,
+  },
+
+}
+</script>
+
+<template>
+  <slotvue>
+    <template  #left="message">
+      <!-- {{ message }} -->
+    </template>
+  </slotvue>
+
+
+  <h1>爱坤之家</h1>
+  <slotvue>
+    <template  #ikun="message">
+    
+    <div class="kunlist" v-show="message.message[0]">
+      {{ message.message }}
+    <div v-for="item in kunlist">
+      <img :src="item.url" class="ikun"  alt="">  
+     <p>{{item.title}}</p> 
+  </div>
+  </div>
+</template>
+  </slotvue>
+
+  <slotvue>
+    <template  #heizi="message">
+    <ul class="blackzi" v-show= "message.message[1]">
+      <li v-for="item in blackkun">
+        <img :src="item.url" class="heiimg"  alt="">  
+        <p>{{item.title}}</p> 
+      </li>
+    </ul>
+  </template>
+  </slotvue>
+
+</template>
+
+<style scoped>
+.ikun{
+  width: 400px;
+  height: 460px;
+}
+.kunlist{
+  margin-left: 300px;
+  margin-top: 100px;
+  width: 1300px;
+  display: flex;
+  justify-content:space-between;
+}
+.heizi{
+  margin-left: 300px;
+}
+.heizi li{
+  list-style: none;
+}
+</style>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/assets/logo.svg" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/assets/logo.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..7565660356e5b3723c9c33d508b830c9cfbea29f
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/assets/logo.svg"
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconCommunity.vue" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconDocumentation.vue" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconEcosystem.vue" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconSupport.vue" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconTooling.vue" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/slot.vue" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/slot.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..3230059ddf9d7c1b8dbf1a37a74d4fcf8529283c
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/components/slot.vue"
@@ -0,0 +1,76 @@
+<template >
+    <slot name="left" :message="flagarr">
+        <div class="left">
+            <ul>
+                <li @click="changeshow(0)"><a href="#">真爱坤</a></li>
+                <li @click="changeshow(1)"><a href="#">小黑子</a></li>
+            </ul>
+        </div>
+    </slot>
+    <slot name="ikun" :message="flagarr"></slot>
+    <slot name="heizi" :message="flagarr"></slot>
+</template>
+
+<script>
+export default {
+    data: function () {
+        return {
+            flagarr: [true, false]
+        }
+    },
+
+    methods: {
+        changeshow: function (index) {
+            // for (let i = 0; i < this.flagarr.length; i++) {
+            //     if (i === index) {
+            //         this.flagarr[i] = true;
+            //     } else {
+            //         this.flagarr[i] = false;
+
+            //     }
+            // }
+            // console.log(this.flagarr);
+            this.flagarr = [false, false];
+            this.flagarr[index] = true
+
+        }
+    },
+}
+</script>
+<style>
+* {
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    width: 160px;
+    margin: 0 auto;
+    color: red;
+    text-align: center;
+}
+
+.left {
+    font-size: larger;
+    width: 200px;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    background-color: cornflowerblue;
+}
+
+li {
+    text-align: center;
+    width: 200px;
+    list-style: none;
+    background-color: aqua;
+    margin-bottom: 20px;
+}
+
+li a {
+    text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/main.js" "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..1d4acd7cd1c792a84e9a63dba4754d7f302bdb07
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_chacao/vue-project/src/main.js"
@@ -0,0 +1,3 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+createApp(App).mount('#app')
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/index.html" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..99f583aa2b835f6885f2c233a0e1f6d395fa42af
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/index.html"
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/public/favicon.ico" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/public/favicon.ico" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/App.vue" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..1a47f81b962c023195e5b9cd237fd964adaef0ed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/App.vue"
@@ -0,0 +1,14 @@
+<script setup>
+import { RouterLink, RouterView } from 'vue-router'
+// 作业：实现一个登入页，登入成功跳转到 后台的首页，
+// 如果已经登入了，到到登入页页自动跳转到 后台首页（可以不借助后端）
+</script>
+
+<template>
+  
+  <RouterView />
+</template>
+
+<style scoped>
+
+</style>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/assets/6436_9360841498310293.jpg" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/assets/6436_9360841498310293.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8bb963655bc64ef49c6c78afc0f9ab60dd33b44a
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/assets/6436_9360841498310293.jpg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/home.vue" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/home.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..a416bf840ea12df8514b337e57558c78271bffa6
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/home.vue"
@@ -0,0 +1,18 @@
+<template>
+    <div>
+      <h1>这是首页</h1>
+      <div>
+        <h2>来啦~   厉不厉害你坤哥</h2>
+        <img src="https://img2.baidu.com/it/u=4236580766,3849391002&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500" alt="">
+        <p style="color:red;font-size: xx-large;" >❤ 欢迎来到坤之家 ❤ </p>
+      </div>  
+    </div>
+</template>
+<script setup>
+
+</script>
+<style>
+    body{
+        text-align: center;
+    }
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconCommunity.vue" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconDocumentation.vue" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconEcosystem.vue" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconSupport.vue" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconTooling.vue" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/login.vue" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/login.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..9101293e1a38435e09469288fdd9d1dc909ebdd3
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/components/login.vue"
@@ -0,0 +1,83 @@
+<template >
+    <div class="wai">
+        <div id="main">
+            <h1>用户登录</h1>
+            <div class="user">
+                <input type="text" name="user" placeholder="请输入账号">
+                <input type="text" name="password" placeholder="请输入密码">
+            </div>
+            <input id="sub" type="submit" value="登录" @click="rea.checkuser">
+        </div>
+    </div>
+</template>
+<script setup>
+    let router=useRouter();
+    let route=useRoute();
+    import { reactive } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+    let rea=reactive({
+        checkuser:function(){
+            let user=document.getElementsByName("user")[0].value
+            let password=document.getElementsByName("password")[0].value
+            if(user=="wjj"&&password=="123456"){
+                localStorage.setItem("user",JSON.stringify({name:user,password:password}))
+                router.push({path:"/home"})
+            }else{
+                alert("用户名或密码有误！")
+            }
+        }
+    })
+</script>
+<style scoped>
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.wai {
+    width: 100vw;
+    height: 100vh;
+    background-image: url(../assets/6436_9360841498310293.jpg);
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#main {
+    width: 500px;
+    height: 300px;
+    background-color: aliceblue;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+}
+
+#main h1 {
+    margin-top: 50px;
+}
+.user{
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top:120px;
+    justify-content: space-around;
+}
+input{
+    height: 30px;
+}
+#sub{
+    
+    width: 173px;
+    position: absolute;
+    bottom: 40px;
+    background-color: aqua;
+    border: none;
+    color: rgb(40, 44, 44);
+    font-weight: 900;
+    font-size: medium;
+    
+}
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/main.js" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..c8e37b03b9c2289ea08f80feeca1880e2abc3a86
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/main.js"
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/router/index.js" "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..52168758e46338e07f6a10039fbf41e0a465cc3c
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_each_\350\267\257\347\224\261\345\256\210\345\215\253/src/router/index.js"
@@ -0,0 +1,36 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import login from '../components/login.vue'
+import home from '../components/home.vue'
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path:"/login",
+      name:"login",
+      component:login,
+      meta:{ischeck:false,title:"登录页"}
+    },
+    {
+      path:"/home",
+      name:"home",
+      component:home,
+      meta:{ischeck:true,title:"首页"}
+    },
+  ]
+})
+
+router.beforeEach((to,from)=>{
+  let islogin=localStorage.getItem("user");
+  if(to.meta.ischeck==true&&islogin==null){
+    return false;
+  }
+  
+  if(to.path=="/login"&&islogin!=null){
+    return {name:"home" }
+  }
+})
+
+router.afterEach((to,from)=>{
+  document.getElementsByTagName("title")[0].textContent=to.meta.title
+})
+export default router
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/index.html" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..99f583aa2b835f6885f2c233a0e1f6d395fa42af
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/index.html"
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/public/favicon.ico" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/public/favicon.ico" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/App.vue" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..9e651e871a831512178796e2d65066c5e16ee55f
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/App.vue"
@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from 'vue';
+import goodsitem from './components/goodsitem.vue';
+import emitter from './utils/eventbus';
+
+let goodslist = [
+    { img: "https://gw.alicdn.com/bao/uploaded/i3/6000000004536/O1CN01HiQ7EL1jNXNk1FS2p_!!6000000004536-0-sm.jpg_320x320q90.jpg_.webp", des: "千禾厨房调味3年料酒500ml家用烹饪去腥解膻提味增鲜调料", price: 12.8, num: 1, sumprice: 0 },
+    { img: "https://gw.alicdn.com/bao/uploaded/i2/135022632/O1CN014DyDjE1VJV6ZIDzdu_!!135022632.jpg_320x320q90.jpg_.webp", des: "奥克斯【有线】吸尘器家用手持地毯低噪除螨小型大功率强力吸尘机", price: 129, num: 1, sumprice: 0 },
+    { img: "https://gw.alicdn.com/bao/uploaded/i2/3459177618/O1CN014BE6bi26963o8Apdd_!!0-item_pic.jpg_320x320q90.jpg_.webp", des: "MINISO名创优品香体喷雾山谷百合香水女士淡香香体", price: 39.9, num: 1, sumprice: 0 },
+]
+let getsumprice=ref(0) //顶层属性ref自动解包
+emitter.on("getsumprice",(val)=>{
+    getsumprice.value=val
+
+})
+</script>
+
+<template>
+    <div class="top">
+        <h1 style="margin: 0 auto;">购物车</h1>
+         <h1 id="sumprice">总计:{{getsumprice}}</h1>   <!--顶层属性ref自动解包 -->
+    </div>
+
+    <div class="itemlist">
+        <goodsitem v-for="item, index in goodslist" :goods="item">
+
+        </goodsitem>
+    </div>
+</template>
+
+<style scoped>
+.top {
+    margin: 0 auto;
+    width: 70vw;
+    display: flex;
+    background-color: aliceblue;
+    align-items: center;  
+    position: relative;
+}
+
+.itemlist {
+    margin: 0 auto;
+    margin-top: 0.1vw;
+    width: 70vw;
+    background-color:whitesmoke;
+}
+#sumprice{
+   position: absolute;
+   right: 10vw;
+}
+</style>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/assets/base.css" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/assets/base.css"
new file mode 100644
index 0000000000000000000000000000000000000000..71dc55a3cb5a72589496743a327c738ead3e1c83
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/assets/base.css"
@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/assets/logo.svg" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/assets/logo.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..7565660356e5b3723c9c33d508b830c9cfbea29f
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/assets/logo.svg"
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/assets/main.css" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/assets/main.css"
new file mode 100644
index 0000000000000000000000000000000000000000..e8667cd4508b6163e44e675ff899de1896544c84
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/assets/main.css"
@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/goodsitem.vue" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/goodsitem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..d47f2c935dba203968201da4802ceab90b6eadc6
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/goodsitem.vue"
@@ -0,0 +1,99 @@
+<template >
+    <div class="goodslist">
+        <img :src="goods.img">
+        <div class="des">{{ goods.des }}</div>
+        <div class="prandnum"> <span style="color: red;">￥ <span class="totalprice">{{ totalprice }}</span></span>
+            &nbsp;&nbsp; <button @click="changenum.cnum('addnum')">+</button>
+            <input type="text" :value="totalnum" style="width: 1vw; text-align: center;"> <button
+                @click="changenum.cnum('reducenum')">-</button>
+        </div>
+    </div>
+</template>
+<script setup>
+
+import { onMounted, reactive, ref, watch } from 'vue';
+import emitter from '../utils/eventbus';
+let theprops = defineProps({
+    goods: Object
+})
+let totalnum = ref(theprops.goods.num) //初始化父组件的初始值，并没改变父组件对应根本的初始值
+let totalprice = ref(theprops.goods.price);//一定记得ref取值是加.value[除非顶层自动解包] ————封装修改的reactive??  总价初始值为单价
+let singleprice = ref(theprops.goods.price)//单价
+let totalprices = document.getElementsByClassName("totalprice")
+let sumprice = 0;
+let changenum = reactive({  //记得reactive里是对象，不然响应式会失效 ref好像不需要
+    cnum: function (flag) {
+        if (flag == "addnum") {
+            // console.log(num.value);
+            totalnum.value = Number(totalnum.value) + 1
+        } else {
+            if (totalnum.value == 0) {
+                return;
+            }
+            totalnum.value = Number(totalnum.value) - 1
+        }
+    },
+    getsumprice: function (iswait) {
+        if (iswait == false) {
+            for (let vv of totalprices) {
+                sumprice += Number(vv.textContent)
+                emitter.emit("getsumprice", sumprice.toFixed(2))
+            }
+            console.log(sumprice);
+        } else {
+            sumprice = 0;//归零重新计算，否则会从onMounted改变后的sumprice值开始累加！
+            for (let vv of totalprices) {
+                setTimeout(() => {
+                    sumprice += Number(vv.textContent)
+                    console.log(sumprice);
+                    emitter.emit("getsumprice", sumprice.toFixed(2))
+                }, 200)
+            }
+
+        }
+
+    }
+})
+
+watch(
+    totalnum,
+    (val, old) => {
+        totalprice.value = (singleprice.value * val).toFixed(2) //toFixed(2)--取小数点后两位
+        console.log(totalprice);
+        changenum.getsumprice(true)
+
+    }
+)
+onMounted(function () {
+    changenum.getsumprice(false)
+})
+</script>
+<style>
+.goodslist {
+    height: 18vw;
+    display: flex;
+    margin-bottom: 0.5vw;
+    background-color: white;
+    align-items: center;
+    position: relative;
+}
+
+img {
+    width: 15vw;
+    height: 15vw;
+    margin-left: 2vw;
+}
+
+.des {
+    position: absolute;
+    top: 1.5vw;
+    left: 20vw;
+    font-weight: 900;
+}
+
+.prandnum {
+    margin-left: 17vw;
+    font-size: larger;
+    margin-top: 12vw;
+}
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconCommunity.vue" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconDocumentation.vue" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconEcosystem.vue" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconSupport.vue" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconTooling.vue" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/main.js" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..1d4acd7cd1c792a84e9a63dba4754d7f302bdb07
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/main.js"
@@ -0,0 +1,3 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+createApp(App).mount('#app')
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/utils/eventbus.js" "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/utils/eventbus.js"
new file mode 100644
index 0000000000000000000000000000000000000000..468fd85e7471c6f4f76393150414b9b97b7b4b02
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_emit_shopcar/src/utils/eventbus.js"
@@ -0,0 +1,5 @@
+import mitt from 'mitt'
+
+let emitter=mitt();
+
+export default emitter;
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/index.html" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..99f583aa2b835f6885f2c233a0e1f6d395fa42af
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/index.html"
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/public/favicon.ico" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/public/favicon.ico" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/App.vue" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..03a7abebbb6f2b8c5b6e9e4d018d30f04afa0fdf
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/App.vue"
@@ -0,0 +1,18 @@
+<script setup>
+import { RouterLink, RouterView } from 'vue-router'
+
+</script>
+
+<template>
+  
+  <router-view v-slot="{ Component }">
+    <keep-alive include="goods">  <!-- goods 是goods.vue 里面的 script里的name属性  一般直接name=。。 setup语法糖:let name=...   要跟路由 router/index.js 里面的名词一致-->
+      <component :is="Component" />
+    </keep-alive>
+  </router-view>
+  
+</template>
+
+<style scoped>
+
+</style>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/car.vue" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/car.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..83ce057147859555ded078c442b9ed7ccf4639dc
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/car.vue"
@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div v-for="item,index in list.goodslist ">
+            <div>{{index}}</div>
+            <p>{{item}}</p>
+        </div>
+    </div>
+</template>
+<script setup>
+let name="car";
+import { useRoute, useRouter } from 'vue-router';
+import { reactive } from 'vue';
+let route=useRoute()
+let router=useRouter()
+
+let goods=route.query
+let sumlist=localStorage.getItem("goods")
+//记得要用响应式数据--核心
+let list=reactive({ 
+    goodslist:{}
+})  
+//第一次
+if(sumlist==null){
+    for (const key in goods) {
+        list.goodslist[key]=goods[key]
+}
+}
+//第二次
+else{
+    for (const key in goods) {
+         list.goodslist[key]=parseInt(goods[key]) + parseInt(JSON.parse(sumlist)[key] )  
+}
+}
+localStorage.setItem("goods",JSON.stringify(list.goodslist))
+
+
+
+</script>
+<style>
+    
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/goods.vue" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/goods.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..79843aa78d30cb98b7b49689b4ed83e179f83802
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/goods.vue"
@@ -0,0 +1,67 @@
+<template>
+    <div class="main">
+        <div v-for="item,index in rea.goodslist">
+            <img :src="item.img" alt="">
+            <p>{{item.des}}</p>
+            <div>
+                <span>{{item.price}}</span>
+            </div>
+          购买数量:  <input type="number" v-model="item.num">
+          
+        </div>
+        <input type="submit" value="去结算" id="sub" @click="rea.tocar">
+    </div>
+</template>
+<script setup>
+let name="goods";
+import { reactive } from 'vue';
+import { watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+let router=useRouter()
+let route=useRoute()
+let rea=reactive({
+    goodslist:[
+        {img:"https://gw.alicdn.com/bao/uploaded/i1/3450653793/O1CN011kNQeq1dtF5Y3Uq8P_!!3450653793.jpg_300x300q90.jpg_.webp",des:"甜美可爱lolita蝴蝶结挂脖连衣裙女春夏爱心网纱洋装洛丽塔公主裙",price:"￥168",num:0},
+        {img:"https://gw.alicdn.com/bao/uploaded/i4/2200799283113/O1CN012puGzP1YrngbtYT51_!!0-item_pic.jpg_300x300q90.jpg_.webp",des:"适用iwatch表带苹果手表applewatch6代7SE5/4/3/2/1代潮牌卡通硅胶运动44mm42女38mm40通用iphoneseries6表带",price:"￥38",num:0},
+        {img:"https://gw.alicdn.com/bao/uploaded/i1/2209918180861/O1CN01uFPCKJ1IENokSlWIy_!!2209918180861.jpg_300x300q90.jpg_.webp",des:"超凡蜘蛛侠紧身衣正版成人高级战衣蜘蛛侠衣服儿童连体套装迈尔斯",price:"￥100",num:0}
+    ],
+    tocar:function(){
+        let arrnum={}
+        rea.goodslist.forEach(element => {
+            arrnum[element.des]=element.num
+        });
+       router.push({path:"/car",query:arrnum})
+    }
+})
+
+watch(rea.goodslist,function(){
+    rea.goodslist.forEach(element => {
+        if(element.num<0){
+            element.num=0
+        }
+    });
+})
+
+
+
+    
+
+
+
+
+</script>
+<style scoped>
+body{
+    margin: 0;
+    padding: 0;
+}
+.main{
+    width: 500px;
+    margin: 0 auto;
+}
+#sub{
+    width: 100px;
+    height: 50px;
+    margin-left: 500px;
+} 
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconCommunity.vue" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconDocumentation.vue" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconEcosystem.vue" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconSupport.vue" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconTooling.vue" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/main.js" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..c8e37b03b9c2289ea08f80feeca1880e2abc3a86
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/main.js"
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/router/index.js" "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..bde9bdd69d52993cad79a8bbdeb8c153e283b18f
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_keepalive/src/router/index.js"
@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import goods from "../components/goods.vue"
+import car from "../components/car.vue"
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/goods',
+      name: 'goods',
+      component: goods
+    },
+    {
+      path: '/car',
+      name: 'car',
+      component:car
+    }
+  ]
+})
+
+export default router
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/index.html" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..762871300c5d82f39504a3954d62f5e48fbf7399
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/index.html"
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="shortcut icon" href="./public/img/kk.jpg">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>坤坤后台系统</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/favicon.ico" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/favicon.ico" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/heizi01.jpeg" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/heizi01.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..2b2ee91f420890d0baed111edf5303f0da82e38a
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/heizi01.jpeg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/heizi02.jpg" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/heizi02.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..16f139f127da0534ec86a466253dfbc5f0719fc8
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/heizi02.jpg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/heizi03.jpg" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/heizi03.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..595edc0cfb344d08a37261226fa1374e80c9cfc4
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/heizi03.jpg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/ikun01.jpeg" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/ikun01.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..3c88b7851b1be9711794c66c99571b37b88edfc2
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/ikun01.jpeg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/ikun02.jpg" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/ikun02.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e9b8f49946b3ebbcff8a527e2c9f42d19f64e2d2
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/ikun02.jpg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/ikun03.jpeg" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/ikun03.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..3d1332faae02d33d69d34bea80339fc2f6bcedb1
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/ikun03.jpeg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/kk.jpg" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/kk.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..dac3190572045c6a1b789c7754b19ce793e9771b
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/public/img/kk.jpg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/App.vue" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..e27b4a6b1fd0692ec791b0a40a60902db30b9bca
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/App.vue"
@@ -0,0 +1,73 @@
+<script setup>
+import slotvue from './components/slot.vue';
+import {ref} from 'vue';
+let kunlist = [{ title: "kun01", url: "../public/img/ikun01.jpeg" },
+{ title: "kun02", url: "../public/img/ikun02.jpg" },
+{ title: "kun03", url: "../public/img/ikun03.jpeg" }
+];
+let blackkun = [{ title: "黑子01", url: "../public/img/heizi01.jpeg" },
+{ title: "黑子02", url: "../public/img/heizi02.jpg" },
+{ title: "黑子03", url: "../public/img/heizi03.jpg" }
+];
+
+// let testref=ref()
+// let showflag=testref.value
+// console.log(showflag);
+</script>
+
+<template>
+  <slotvue>
+    <template #left="message">
+      <!-- {{ message }} -->
+     
+    </template>
+  </slotvue>
+
+
+  <h1>爱坤之家</h1>
+  <slotvue>
+    <template #ikun="message1" >
+      <div class="kunlist" v-show="message1.message1[0]">
+        {{ message1 }}
+        {{ showflag }}
+        <div v-for="item in kunlist">
+          <img :src="item.url" class="ikun" alt="">
+          <p>{{ item.title }}</p>
+        </div>
+      </div>
+    </template>
+
+    <template #heizi="message2">
+      <ul class="blackzi" v-show="message2.message2[1]">
+        {{ message2 }}
+        <li v-for="item in blackkun">
+          <img :src="item.url" class="heiimg" alt="">
+          <p>{{ item.title }}</p>
+        </li>
+      </ul>
+    </template>
+  </slotvue>
+</template>
+
+<style scoped>
+.ikun {
+  width: 400px;
+  height: 460px;
+}
+
+.kunlist {
+  margin-left: 300px;
+  margin-top: 100px;
+  width: 1300px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.heizi {
+  margin-left: 300px;
+}
+
+.heizi li {
+  list-style: none;
+}
+</style>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/assets/logo.svg" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/assets/logo.svg"
new file mode 100644
index 0000000000000000000000000000000000000000..7565660356e5b3723c9c33d508b830c9cfbea29f
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/assets/logo.svg"
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconCommunity.vue" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconDocumentation.vue" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconEcosystem.vue" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconSupport.vue" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconTooling.vue" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/slot.vue" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/slot.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..8582c622353513607cc6db7d49016da3e43bf965
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/components/slot.vue"
@@ -0,0 +1,70 @@
+<template >
+    <slot name="left" :message="flagarr">
+        <div class="left">
+            <ul>
+                <li @click="changeshow(0)"><a href="#">真爱坤</a></li>
+                <li @click="changeshow(1)"><a href="#">小黑子</a></li>
+            </ul>
+        </div>
+    </slot>
+    <slot name="ikun" :message1="flag.flagarr"></slot>
+    <slot name="heizi" :message2="flag.flagarr">
+      <span>this is heizi: {{ flag.flagarr }}</span> 
+    </slot>
+</template>
+
+<script setup>
+import { reactive,ref,defineExpose } from 'vue';
+let flag =reactive({
+  flagarr:[true, false]
+}) 
+
+function changeshow(index) {
+    flag.flagarr = [false, false];
+    flag.flagarr[index] = true
+    console.log(flag.flagarr)
+    
+   
+}
+// defineExpose({
+//     flag,
+// })
+</script>
+
+<style>
+* {
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    width: 160px;
+    margin: 0 auto;
+    color: red;
+    text-align: center;
+}
+
+.left {
+    font-size: larger;
+    width: 200px;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    background-color: cornflowerblue;
+}
+
+li {
+    text-align: center;
+    width: 200px;
+    list-style: none;
+    background-color: aqua;
+    margin-bottom: 20px;
+}
+
+li a {
+    text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/main.js" "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..1d4acd7cd1c792a84e9a63dba4754d7f302bdb07
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_setup\350\257\255\346\263\225\347\263\226/src/main.js"
@@ -0,0 +1,3 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+createApp(App).mount('#app')
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/index.html" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..99f583aa2b835f6885f2c233a0e1f6d395fa42af
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/index.html"
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/favicon.ico" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/favicon.ico"
new file mode 100644
index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/favicon.ico" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/ikun1.webp" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/ikun1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..27844369c37bb5e7aa0ca02528e8f309eafa29ad
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/ikun1.webp" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/ikun2.webp" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/ikun2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..9ce26d568e24752afbaf73390eae05c3433eff08
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/ikun2.webp" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/ikun3.webp" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/ikun3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..8221fe013faf64b7a6d739bfb83c1a26d5dfcab1
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/ikun3.webp" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/\346\262\271\351\245\274.jpg" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/\346\262\271\351\245\274.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7822d6cc26c9a714be28f71a8a5429fe11e59c08
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/\346\262\271\351\245\274.jpg" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/\350\215\224\346\236\235.webp" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/\350\215\224\346\236\235.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..0a715fd14ba2b4dbc5d228fb7ddc487c9a23a979
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/\350\215\224\346\236\235.webp" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/\351\270\241.webp" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/\351\270\241.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5ae4157e35fc5cf9b6b5f92e53ec7aaa0be0d323
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/public/img/\351\270\241.webp" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/App.vue" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/App.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6c84496c01be27a7e131ea2b712edc72bc10b9cc
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/App.vue"
@@ -0,0 +1,20 @@
+<script setup>
+import { RouterLink, RouterView } from 'vue-router'
+import left from './components/left.vue';
+</script>
+
+<template>
+  <div id="big">
+    <left></left>
+    <RouterView></RouterView>
+  </div>
+</template>
+
+<style scoped>
+
+#big{
+  width: 100vw;
+  display: flex;
+  
+}
+</style>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/food.vue" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/food.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..46322ea1fe217cf321fe9b0156897a08d64bf00c
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/food.vue"
@@ -0,0 +1,33 @@
+<template>
+    <div class="contentright">
+       <h1>♥爱坤Food♥</h1> 
+       <div class="foodlist">
+       <div> <img src="../../public/img/油饼.jpg" alt=""> <span style="font-size: xx-large;font-weight:bolder;color:crimson">---油饼</span> </div>
+       <div><img src="../../public/img/荔枝.webp" alt=""> <span style="font-size: xx-large;font-weight:bolder;color:crimson"> ---荔枝</span></div> 
+       <div><img src="../../public/img/鸡.webp" alt="">  <span style="font-size: xx-large;font-weight:bolder;color:crimson">---鸡</span> </div> 
+       </div>
+    </div>
+</template>
+<script setup>
+
+</script>
+<style scoped>
+.contentright{
+    margin-left: 2vw;
+    display: flex;
+    flex-direction: column;
+   align-items: center;
+}
+.foodlist{
+    width: 66vw;
+    height:50vw ;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    background-color: bisque;
+}
+.foodlist img{
+    width: 20vw;
+   
+}    
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconCommunity.vue" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconCommunity.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..2dc8b055253af30fb797037e2fe260505f0cf711
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconCommunity.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconDocumentation.vue" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconDocumentation.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconDocumentation.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconEcosystem.vue" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconEcosystem.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..c3a4f078c0bd340a33c61ea9ecd8a755d03571ed
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconEcosystem.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconSupport.vue" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconSupport.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..7452834d3ef961ce24c3a072ddba2620b6158bae
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconSupport.vue"
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconTooling.vue" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconTooling.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..660598d7c76644ffe126a1a1feb1606650bfb937
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/icons/IconTooling.vue"
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/left.vue" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/left.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..f01585af4a217cd21be9c9a9dffe2e54e2ffb578
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/left.vue"
@@ -0,0 +1,58 @@
+<template >
+    <div id="leftmain">
+        <ul>
+        <li :class="{active:rea.active[0]}"  @click="rea.changeactive(0)">
+             <router-link to="/food" tag="a">食物</router-link>   <!--默认渲染为a标签 ————tag='a'-->
+        </li>
+        
+        <li :class="{active:rea.active[1]}"  @click="rea.changeactive(1)">
+           <router-link to="/screen">风景</router-link> 
+        </li>
+        </ul>
+    </div>
+</template>
+<script setup>
+import { ref,reactive } from 'vue';
+import { RouterLink } from 'vue-router';    
+    let rea=reactive({
+        changeactive:function(index){
+        rea.active=[false,false]
+        rea.active[index]=true
+        if(index==0){
+            
+        }    
+        
+    },
+    active:[true,false],
+
+  })   
+// console.log(rea.active);
+</script>
+<style scoped>
+*{
+    margin: 0;
+    padding: 0;
+}
+ #leftmain{
+    width:20vw;
+    height: 99vh;
+    margin-top: 1vh;
+    background-color: aquamarine;
+ }   
+
+ li{
+    width:20vw;
+    text-align: center;
+    list-style: none;
+    margin-bottom: 1vw;
+    font-weight: 900;
+    font-size: larger;
+ }
+ .active{
+    background-color: aqua;
+ }
+ a{
+    text-decoration: none;
+ }
+
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/screen.vue" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/screen.vue"
new file mode 100644
index 0000000000000000000000000000000000000000..ccfec3fc6cae9adadd6c3361097e2653cac84676
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/components/screen.vue"
@@ -0,0 +1,34 @@
+<template>
+    <div class="contentright">
+        <h1>♥今生不悔爱坤坤,来世还要再爱坤♥</h1> 
+       <div class="foodlist">
+       <div> <img src="../../public/img/ikun1.webp" alt=""> <span style="font-size: xx-large;font-weight:bolder;color:yellow">---帅坤</span> </div>
+       <div><img src="../../public/img/ikun2.webp" alt=""> <span style="font-size: xx-large;font-weight:bolder;color:yellow"> ---天生我材蔡徐坤</span></div> 
+       <div><img src="../../public/img/ikun3.webp" alt="">  <span style="font-size: xx-large;font-weight:bolder;color:yellow">---小黑子</span> </div> 
+       </div>
+    </div>
+</template>
+<script setup>
+
+</script>
+<style scoped>
+.contentright{
+    margin-left: 2vw;
+    display: flex;
+    flex-direction: column;
+   align-items: center;
+}
+.foodlist{
+    width: 72vw;
+    height:50vw ;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    background-color: rgb(212, 49, 171);
+}
+.foodlist img{
+    margin-left: 1vw;
+    width: 25vw;
+    height: 15vw;
+}   
+</style>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/main.js" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/main.js"
new file mode 100644
index 0000000000000000000000000000000000000000..c8e37b03b9c2289ea08f80feeca1880e2abc3a86
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/main.js"
@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/router/index.js" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/router/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..30c0ca40359ec4d10378ad4ac9e9cc0f2f2deec1
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26101/src/router/index.js"
@@ -0,0 +1,26 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import left from '../components/left.vue'
+import food from '../components/food.vue'
+import screen from '../components/screen.vue'
+const router = createRouter({
+  routes: [
+    {
+      path: '/leftlist',
+      name: 'leftlist',
+      component: left
+    },
+    {
+      path: '/food',
+      name: 'food',
+      component: food
+    },
+    {
+      path:'/screen',
+      name:'screen',
+      component:screen
+    }
+  ],
+  history:createWebHistory()
+})
+
+export default router
diff --git "a/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26102_\345\265\214\345\245\227\350\267\257\347\224\261.zip" "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26102_\345\265\214\345\245\227\350\267\257\347\224\261.zip"
new file mode 100644
index 0000000000000000000000000000000000000000..88e7829b60f249d749c619537231235328163b21
Binary files /dev/null and "b/\347\216\213\351\224\246\345\206\233/vue_\350\267\257\347\224\26102_\345\265\214\345\245\227\350\267\257\347\224\261.zip" differ
diff --git "a/\347\216\213\351\224\246\345\206\233/\346\214\207\344\273\244\344\275\234\344\270\232.html" "b/\347\216\213\351\224\246\345\206\233/\346\214\207\344\273\244\344\275\234\344\270\232.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0342e2a55697b00ff6e594a1bf65cb958b064576
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/\346\214\207\344\273\244\344\275\234\344\270\232.html"
@@ -0,0 +1,42 @@
+<!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>指令作业</title>
+</head>
+<body>
+    <form action="">
+        <input name="name" v-model="val" v-checkname="val">
+    </form>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script>
+    Vue.createApp({
+        data:()=>{
+            return {
+                val:null
+            };
+        },
+        directives:{
+            checkname:{
+                created:function(){
+                    console.log("生成了实例");
+                },
+                //这里面是可以写生命周期
+                updated(el) {
+                    console.log("update-----------------");
+                    //el 原生dom
+                    if(el.value.length<2||el.value.length>20){
+                        el.style.background='blue';
+                        
+                    }else{
+                        el.style.background='none';
+                    }
+                },
+            }
+        }
+    }).mount("body")
+</script>
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/\347\224\237\345\221\275\345\221\250\346\234\237/api.js" "b/\347\216\213\351\224\246\345\206\233/\347\224\237\345\221\275\345\221\250\346\234\237/api.js"
new file mode 100644
index 0000000000000000000000000000000000000000..b53928011f5fe9349ece976076dc1814ee25cc50
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/\347\224\237\345\221\275\345\221\250\346\234\237/api.js"
@@ -0,0 +1,16 @@
+let express = require("express");
+
+let app = express();
+
+app.get("/list",function(req,res){
+    let data=[];
+    data.push('中国最北--漠河');
+    data.push('中国最南--三沙');
+    data.push('中国洼地--吐鲁番盆地');
+    data.push('中国最绿--福建');
+    res.setHeader('Content-Type','text/html;charset=utf-8');
+    res.header("Access-Control-Allow-Origin","*");
+    res.end(JSON.stringify(data));
+})
+
+app.listen(8080);
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/\347\224\237\345\221\275\345\221\250\346\234\237/\347\224\237\345\221\275\345\221\250\346\234\237\344\275\234\344\270\232.html" "b/\347\216\213\351\224\246\345\206\233/\347\224\237\345\221\275\345\221\250\346\234\237/\347\224\237\345\221\275\345\221\250\346\234\237\344\275\234\344\270\232.html"
new file mode 100644
index 0000000000000000000000000000000000000000..619dd351decbc529b18eea30810ab4208e177ccc
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/\347\224\237\345\221\275\345\221\250\346\234\237/\347\224\237\345\221\275\345\221\250\346\234\237\344\275\234\344\270\232.html"
@@ -0,0 +1,51 @@
+<!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>生命周期作业</title>
+</head>
+
+<body>
+    <ul>
+        <li v-for="item in list">{{item}}</li>
+    </ul>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
+<script>
+    $(document).ready(function () {
+        Vue.createApp({
+            created: function () {
+                this.getData('http://localhost:8080/list',{});//方法也是可以直接使用this获取
+            },
+            data: function () {
+                return {
+                    list: [],
+                }
+            },
+            methods: {
+                getData: function (url, data) {
+                    let _this = this;
+                    $.ajax(
+                        {
+                            url,
+                            data,
+                            dataType: 'json',
+                            method: 'get',
+                            success: function (data) {
+                                //this.list = data; 这里面的this 不是这个vue对象
+                                _this.list = data;
+                            }
+                        }
+                    )
+                }
+            },
+        }).mount("body");
+    })
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/\347\273\204\344\273\266\344\275\234\344\270\232.html" "b/\347\216\213\351\224\246\345\206\233/\347\273\204\344\273\266\344\275\234\344\270\232.html"
new file mode 100644
index 0000000000000000000000000000000000000000..53fd2995b7379d6fa1bbfc111240fd7dc03e5646
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/\347\273\204\344\273\266\344\275\234\344\270\232.html"
@@ -0,0 +1,66 @@
+<!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>列表</title>
+</head>
+
+<body>
+    <ul>
+        <li v-for="(item,index) in goodsList" ref="list">
+           <item :index="index" :item="item"></item>
+        </li>
+    </ul>
+    <div>购买总数{{totalNum}}</div>
+
+</body>
+
+
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script>
+   let app= Vue.createApp({
+        mounted() {
+            console.log(this.$refs.list)
+        },
+        data: function () {
+            return {
+                goodsList: [
+                    { name: '杨梅', status: 1, price: 5, image: 'https://img0.baidu.com/it/u=2066768025,1660066629&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
+                    { name: '芒果', status: 1, price: 7, image: 'https://img1.baidu.com/it/u=3321154809,1906267857&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=429' },
+                    { name: '香蕉', status: '', price: 2.8, image: 'https://n.sinaimg.cn/sinacn20116/119/w1080h1439/20190822/eaed-icqznfz7285339.jpg' },
+                    { name: '枇杷', status: 1, price: 10, image: 'https://pics1.baidu.com/feed/caef76094b36acaff6fc18604f9c3d1600e99cde.jpeg?token=76fe8bec7e4e8d433fad8163de9f6d82' }
+                ],
+                totalNum:0,
+                index:null,
+
+            }
+        },
+        components: {
+            item: {
+                methods: {
+                    change:function(index){
+                        //alert("购买了",index);
+                        console.log(index)
+                        app.$data.index = index
+                    }
+                },
+            
+                props:['index','item'],
+                template: '<div><span>{{index+1}}---{{item.name}}--{{item.price}}</span></div><div><img width="200" v-bind:src="item.image" alt=""></div><div><input @change="change(index)" name="buy"></div>',
+            }
+        },
+        watch:{
+            index:function(newValue){
+                console.log("子组件发生了购买行为")
+                console.log("对应dom对象",this.$refs.list[newValue]);
+            }
+        }
+
+    }).mount("body")
+
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\216\213\351\224\246\345\206\233/\350\256\241\347\256\227\345\261\236\346\200\247.html" "b/\347\216\213\351\224\246\345\206\233/\350\256\241\347\256\227\345\261\236\346\200\247.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5eb3997acc26dadc68b6e7a0570994f2e2c3d837
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/\350\256\241\347\256\227\345\261\236\346\200\247.html"
@@ -0,0 +1,105 @@
+<!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>作业列表</title>
+</head>
+
+<body>
+    <ul>
+        <li v-for="item,index in goodsList">
+            <div v-if="(item.totalNum-item.buyNum)>0">
+                <div>{{item.name}}----{{item.price}}</div>
+                <div>剩余{{item.totalNum-item.buyNum}}</div>
+                <div>
+                    <img width="200" height="200" :src="item.image">
+                </div>
+                <div>
+                    <input type="number" placeholder="购买数量" v-model="item.buyNum">
+                </div>
+                <span @click="add(index)">新增</span><span v-on:click="remove(index)">删除</span>
+            </div>
+
+        </li>
+    </ul>
+</body>
+<script src="./vue.global.js"></script>
+<script>
+    let app = Vue.createApp({
+        data: function () {
+            return {
+                goodsList: [
+                    { name: '杨梅', status: 1, price: 5, buyNum: 0, totalNum: 100, image: 'https://img0.baidu.com/it/u=2066768025,1660066629&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' },
+                    { name: '芒果', status: 1, price: 7, buyNum: 0, totalNum: 100, image: 'https://img1.baidu.com/it/u=3321154809,1906267857&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=429' },
+                    { name: '香蕉', status: '', price: 2, buyNum: 0, totalNum: 100, image: 'https://n.sinaimg.cn/sinacn20116/119/w1080h1439/20190822/eaed-icqznfz7285339.jpg' },
+                    { name: '枇杷', status: 1, price: 10, buyNum: 0, totalNum: 100, image: 'https://pics1.baidu.com/feed/caef76094b36acaff6fc18604f9c3d1600e99cde.jpeg?token=76fe8bec7e4e8d433fad8163de9f6d82' }
+                ],
+                obj: {
+                    name: 'js',
+                },
+                weather: '阴天',
+                arr: ['4月', '5月', '6月', '7月'],
+            }
+        },
+        methods: {
+
+            add: function (index) {
+                //普通方式,跟对象一样 可以用去访问数据,即使是追加的元素，在 vue里面事件照样可以生效
+                console.log(this.goodsList[index])
+                this.goodsList.push(this.goodsList[index])
+            },
+
+            remove: function (index) {
+                this.goodsList.splice(index, 1);
+            }
+        },
+        watch: {
+
+            weather: function (value, oldValue) {
+                console.log(value, oldValue)
+            },
+
+            'obj.name': function (value, oldValue) {
+                console.log("obj更新了", value, oldValue);
+            },
+
+            //arr: function (value, oldValue) {
+                //数组，对象,都是引用类型的
+                //                         
+                //          代码                     栈区(空间小,运行快)                 堆区（空间大点，运行稍微慢点）
+                //
+                //         let name='java'               name='java'
+                //                               
+                //         let arr=['h5','sql','php']    arr='0x00001'                     ['h5','sql','php'] 0x00001
+               // console.log("arr更新了", value, oldValue);
+            //},
+
+            arr:{
+                handler(newValue,oldValue){
+                    console.log('数组发生变化了',newValue,oldValue)
+                },
+                deep:true
+            },
+
+            //官网的处理方式
+            goodsList: {
+                handler(newValue, oldValue) {//handler 固定写法
+                    console.log("单个属性监听", newValue, oldValue);
+                    newValue.forEach(element => {
+                        if((element.totalNum-element.buyNum)<=1){
+                            alert("购买的数量过多");
+                        }
+                    });
+                },
+                deep: true,//层次比较深的结构
+            },
+
+        }
+
+    }).mount("body");
+</script>
+
+</html>
\ No newline at end of file
