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..ad79bb904baecefb44c9fc333ce9e2b80da95786
--- /dev/null
+++ "b/\347\216\213\351\224\246\345\206\233/vue_03_\344\272\213\344\273\266.html"
@@ -0,0 +1,140 @@
+<!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($event)">新增</button> <button v-bind:gid=item.gid @click="deletegoods($event)">删除</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(event){
+          let addgid=event.currentTarget.getAttribute('gid')
+          for (let val of this.goodslist) {
+            if(addgid==val.gid){
+                val.goodsNum++;
+            }
+              
+          }
+          },
+          deletegoods:function(event){
+            let degid=event.currentTarget.getAttribute('gid')
+            for (let val of this.goodslist) {
+            if(degid==val.gid){
+                val.goodsNum--;
+            }
+              
+          }
+          }
+        }
+    }
+
+    let app = Vue.createApp(goodsModel)
+    app.mount("#main")
+</script>
+
+</html>
\ No newline at end of file
