diff --git a/chenbei/.keep b/chenbei/.keep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/chenbei/goods-\345\242\236\345\212\240\343\200\201\345\210\240\351\231\244.html" "b/chenbei/goods-\345\242\236\345\212\240\343\200\201\345\210\240\351\231\244.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cbfbac2bc056bfd877c10e03831d11b5f557f8c9
--- /dev/null
+++ "b/chenbei/goods-\345\242\236\345\212\240\343\200\201\345\210\240\351\231\244.html"
@@ -0,0 +1,139 @@
+<!--上一节课基础上，添加  新增 和 删除的按钮,点新增 会加入对应的一条数据，点删除删除对应的商品 -->
+
+<!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>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+            list-style: none;
+        }
+
+        #totall{
+            margin: auto;
+            width: 75%;
+            overflow: hidden;
+            background-color: antiquewhite;
+            display: flex;
+            flex-wrap:wrap;
+            justify-content:flex-start;
+            align-items:flex-start;
+        }
+       
+        .sp{
+            width: 200px;
+            margin: 25px;
+        }
+        .sp-text{
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .sp-describe{
+            font-weight: bold;
+        }
+        .sp img{
+            width: 200px;
+            height: 267px;
+        }
+        .number{
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div id="totall">
+       
+        <div  v-for="(item,i) in items" >
+                <div class="sp" v-if="(item.tonumber-item.number)>0"> 
+                <img v-bind:src="item.img" alt="">
+                <p class="sp-describe">{{item.describe}}</p>
+                <div class="sp-text">
+                    <span class="price">{{item.price}}</span>
+                    <span class="number">剩余数量：{{item.tonumber-item.number}}</span>
+                </div>
+                <input type="number" v-model="item.number">
+                    <button @click="add(i)">增加</button>
+                   <button @click="del(i)">删除</button>
+                
+            </div>
+        </div>
+          
+    </div>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+
+<script>
+
+    Vue.createApp({
+        data:function (){
+            return {
+                items:[
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:100,
+                        price:'￥275',
+                        number:0,
+                    },
+                    {
+                        img:'https://gd4.alicdn.com/imgextra/i4/744523439/O1CN01TV5hLK1bH6ocRlmHb_!!744523439.jpg',
+                        describe:'现货红米Redmi AirDots 3 Pro 原神版降噪可莉真无线智能蓝牙耳机',
+                        tonumber:100,
+                        price:'￥379',
+                        number:0,
+                    },
+                    {
+                        img:'https://img.alicdn.com/imgextra/i1/134348404/O1CN01MBJes52Bx5LnhOrkY_!!134348404.jpg',
+                        describe:'朱迪尼克森女部落原创牛仔外套立体装饰春季新款情侣装宽松上衣',
+                        tonumber:100,
+                        price:'￥288',
+                        number:0,
+                    },
+                    {
+                        img:'https://img.alicdn.com/imgextra/i4/134348404/O1CN01MnEmBP2Bx5HrTHrJ3_!!134348404.jpg_400x400.jpg',
+                        describe:'原创森女部落国风旗袍领上衣炸街设计感新中式两件套浮雕高腰半裙',
+                        tonumber:'100',
+                        price:'￥138',
+                        number:0,
+                    },
+                    {
+                        img:'https://gw.alicdn.com/imgextra/i3/2212148998091/O1CN01fLerQM29djO74mco4_!!2212148998091.jpg_Q75.jpg_.webp',
+                        describe:'Fanci范琦银饰 莫比乌斯 恋爱频率情侣对戒戒指情侣戒指素圈戒指',
+                        price:'￥199',
+                        tonumber:100,
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        price:'￥275',
+                        tonumber:100,
+                        number:0,
+                    }
+                ]
+            }
+
+        },
+        methods:{
+            handInput:function(e){
+                this.number = e.targry.value
+            },
+            add(i){
+                
+                console.log(this.items[i]);
+                this.items.push(this.items[i]);
+            },
+            del(i){
+                //console.log(this.items[i]);
+                this.items.splice(i,1)
+            }
+        }
+    }).mount("#totall");
+</script>
+</html>
\ No newline at end of file
diff --git "a/chenbei/goods-\350\256\241\347\256\227\350\264\255\344\271\260\345\225\206\345\223\201\347\232\204\346\200\273\351\207\221\351\242\235.html" "b/chenbei/goods-\350\256\241\347\256\227\350\264\255\344\271\260\345\225\206\345\223\201\347\232\204\346\200\273\351\207\221\351\242\235.html"
new file mode 100644
index 0000000000000000000000000000000000000000..66efd00d7057db9ef2964eaa57ccb3ee0b25a56f
--- /dev/null
+++ "b/chenbei/goods-\350\256\241\347\256\227\350\264\255\344\271\260\345\225\206\345\223\201\347\232\204\346\200\273\351\207\221\351\242\235.html"
@@ -0,0 +1,166 @@
+<!-- 作业：在上一次基础上，加入监听器和计算属性，用计算属性来计算购买的总价，用监听器来控制购买的数量，如果超出了总数给出提示,不能再加数量了. -->
+
+<!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>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+            list-style: none;
+        }
+
+        #totall{
+            margin: auto;
+            width: 75%;
+            overflow: hidden;
+            background-color: antiquewhite;
+            display: flex;
+            flex-wrap:wrap;
+            justify-content:flex-start;
+            align-items:flex-start;
+        }
+       
+        .sp{
+            width: 200px;
+            margin: 25px;
+        }
+        .sp-text{
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .sp-describe{
+            font-weight: bold;
+        }
+        .sp img{
+            width: 200px;
+            height: 267px;
+        }
+        .number{
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div id="totall">
+       
+        <div  v-for="(item,i) in items" >
+            
+                <div class="sp"> 
+                <!-- <div class="sp" v-if="(item.tonumber-item.number)>0">  -->
+                <img v-bind:src="item.img" alt="">
+                <p class="sp-describe">{{item.describe}}</p>
+                <div class="sp-text">
+                    <span class="price">￥{{item.price}}</span>
+                    <span class="number">剩余数量：{{item.tonumber-item.number}}</span>
+                </div>
+                <input type="number" v-model="item.number" v-on:click="handler(i)">
+                    <button @click="add(i)">增加</button>
+                   <button @click="del(i)">删除</button>
+                   <button @click="money(i)">购买</button>
+                   
+            </div>
+        </div>
+        <p></p>
+    </div>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+
+<script>
+
+    Vue.createApp({
+        data:function (){
+            return {
+                items:[
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:100,
+                        price:'275',
+                        number:0,
+                    },
+                    {
+                        img:'https://gd4.alicdn.com/imgextra/i4/744523439/O1CN01TV5hLK1bH6ocRlmHb_!!744523439.jpg',
+                        describe:'现货红米Redmi AirDots 3 Pro 原神版降噪可莉真无线智能蓝牙耳机',
+                        tonumber:100,
+                        price:'379',
+                        number:0,
+                    },
+                    {
+                        img:'https://img.alicdn.com/imgextra/i1/134348404/O1CN01MBJes52Bx5LnhOrkY_!!134348404.jpg',
+                        describe:'朱迪尼克森女部落原创牛仔外套立体装饰春季新款情侣装宽松上衣',
+                        tonumber:100,
+                        price:'288',
+                        number:0,
+                    },
+                    {
+                        img:'https://img.alicdn.com/imgextra/i4/134348404/O1CN01MnEmBP2Bx5HrTHrJ3_!!134348404.jpg_400x400.jpg',
+                        describe:'原创森女部落国风旗袍领上衣炸街设计感新中式两件套浮雕高腰半裙',
+                        tonumber:'100',
+                        price:'138',
+                        number:0,
+                    },
+                    {
+                        img:'https://gw.alicdn.com/imgextra/i3/2212148998091/O1CN01fLerQM29djO74mco4_!!2212148998091.jpg_Q75.jpg_.webp',
+                        describe:'Fanci范琦银饰 莫比乌斯 恋爱频率情侣对戒戒指情侣戒指素圈戒指',
+                        price:'199',
+                        tonumber:100,
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        price:'275',
+                        tonumber:100,
+                        number:0,
+                    }
+                ]
+            }
+
+        },
+        
+        methods:{
+            handInput:function(e){
+                this.number = e.targry.value
+            },
+            add(i){
+                
+                console.log(this.items[i]);
+                this.items.push(this.items[i]);
+            },
+            del(i){
+                //console.log(this.items[i]);
+                this.items.splice(i,1)
+            },
+            handler(i){
+                // console.log(this.items[i]);
+                    if (this.items[i].number<0) {
+                        this.items[i].number=0 ;
+                    }
+                    if(this.items[i].number>this.items[i].tonumber){
+                        alert("商品总数不超过库存");
+                        this.items[i].number=this.items[i].tonumber;
+
+                    }
+                
+            },
+            money(i){
+                goodsNumber = this.items[i].number;
+                goodsPrice = Number(this.items[i].price);
+                let goodMoney = 0 ,goodsMoney = 0;
+                for (let j = 1; j <=goodsNumber; j++) {
+                    goodMoney += goodsPrice;   
+                }
+                    goodsMoney += goodMoney;
+                console.log("购买商品总额为："+goodsMoney);
+            }
+        }
+        
+    }).mount("#totall");
+</script>
+</html>
\ No newline at end of file
diff --git a/chenbei/shangp.html b/chenbei/shangp.html
new file mode 100644
index 0000000000000000000000000000000000000000..4cc0d291e0a45d57d0fc7c5d0c213017b86527dc
--- /dev/null
+++ b/chenbei/shangp.html
@@ -0,0 +1,58 @@
+<!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>
+    <!--作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据 -->
+    <div id="sp">
+        <table border="1" >
+            <tr>
+                <th>商品名称</th>
+                <th>商品价格</th>
+                <th>商品图片</th>
+            </tr>
+            <tr   v-for="(obj,index) in objs">
+                <td>{{obj.name}}</td>
+                <td>{{obj.price}}</td>
+                <td class="img">
+                          <img v-bind:src="obj.imgSrc" alt="" style="width: 40%;">
+                </td>
+                <!-- {{value}} -->
+            </tr>
+        </table>
+        <!-- <img src="https://img.alicdn.com/bao/uploaded/O1CN01HZ85o51NpY3H0L01Q_!!6000000001619-0-yinhe.jpg" alt=""> -->
+        
+    </div>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script>
+    Vue.createApp({
+        data:function(){
+            return{
+                objs:[
+                    {
+                        name:'耳机',
+                        price:'￥169.00',
+                        imgSrc:'https://img.alicdn.com/bao/uploaded/O1CN01HZ85o51NpY3H0L01Q_!!6000000001619-0-yinhe.jpg'
+                    },
+                    {
+                        name:'怪兽日记GSRJ官方2023年夏季新款创意小恶魔动感男女同款情侣',
+                        price:'￥139.90',
+                        imgSrc:'https://img.alicdn.com/bao/uploaded/O1CN01PO2c8c20VdqfpCxZC_!!6000000006855-0-yinhe.jpg'
+                    },
+                    {
+                        name:'ByYou 夏季气质高级感茶歇法式v领碎花连衣裙收腰显瘦泡泡袖长裙',
+                        price:'￥289.00',
+                        imgSrc:'https://img.alicdn.com/imgextra/i3/106247072/O1CN01Wg1z0Y2271mciYVsr_!!106247072.jpg'
+                    }
+                ]
+            }
+            
+        }
+    }).mount("#sp")
+</script>
+</html>
\ No newline at end of file
diff --git "a/chenbei/sp-list\351\201\215\345\216\206.html" "b/chenbei/sp-list\351\201\215\345\216\206.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1bfab45bc9a39ba339361022a41d80e477015f8a
--- /dev/null
+++ "b/chenbei/sp-list\351\201\215\345\216\206.html"
@@ -0,0 +1,120 @@
+<!-- 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
+
+<!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>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+            list-style: none;
+        }
+
+        #totall{
+            margin: auto;
+            width: 75%;
+            overflow: hidden;
+            background-color: antiquewhite;
+            display: flex;
+            flex-wrap:wrap;
+            justify-content:flex-start;
+            align-items:flex-start;
+        }
+       
+        .sp{
+            width: 200px;
+            margin: 25px;
+        }
+        .sp-text{
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .sp-describe{
+            font-weight: bold;
+        }
+        .number{
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div id="totall">
+        <div class="sp" v-for="i in items" >
+                <div v-if="(i.tonumber-i.number)>0"> 
+                <img v-bind:src="i.img" alt="" width="200">
+                <p class="sp-describe">{{i.describe}}</p>
+                <div class="sp-text">
+                    <span class="price">{{i.price}}</span>
+                    <span class="number">剩余数量：{{i.tonumber-i.number}}</span>
+                </div>
+                <input type="number" v-model="i.number">
+            </div>
+        </div>  
+    </div>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script>
+
+    Vue.createApp({
+        data:function (){
+            return {
+                items:[
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:100,
+                        price:'￥275',
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:100,
+                        price:'￥275',
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:100,
+                        price:'￥275',
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        tonumber:'100',
+                        price:'￥275',
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        price:'￥275',
+                        tonumber:100,
+                        number:0,
+                    },
+                    {
+                        img:'https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00600391/10021818/1421663834-608344664395689984-608344664395689986-2.jpg',
+                        describe:'碎花连衣裙女2023年春季新款甜美A字裙方领法式茶歇裙子女夏',
+                        price:'￥275',
+                        tonumber:100,
+                        number:0,
+                    }
+                ]
+            }
+
+        },
+        methods:{
+            handInput:function(e){
+                this.number = e.targry.value
+            }
+        }
+    }).mount("#totall");
+</script>
+</html>
\ No newline at end of file
diff --git a/chenbei/vue_cli/.keep b/chenbei/vue_cli/.keep
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/chenbei/vue_cli/shoppingApp.vue b/chenbei/vue_cli/shoppingApp.vue
new file mode 100644
index 0000000000000000000000000000000000000000..46c28a9f8b15a4abf675162fdeb6b1c9b7e2ce3a
--- /dev/null
+++ b/chenbei/vue_cli/shoppingApp.vue
@@ -0,0 +1,18 @@
+<script setup>
+
+</script>
+
+<template>
+  <header>
+    
+  </header>
+
+  <main>
+  
+  </main>
+</template>
+
+<style scoped>
+
+
+</style>
diff --git a/chenbei/vue_cli/shoppingCart/main.vue b/chenbei/vue_cli/shoppingCart/main.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e959159879095af9173311534e79e08256f30ae7
--- /dev/null
+++ b/chenbei/vue_cli/shoppingCart/main.vue
@@ -0,0 +1,19 @@
+<template>
+    <ul>
+        <li></li>
+    </ul>
+</template>
+<script>
+export default{
+    data:()=>{
+        return{
+            
+        }
+    }
+}
+    
+</script>
+<style scoped>
+
+
+</style>
\ No newline at end of file
diff --git "a/chenbei/vue\347\273\204\344\273\266.html" "b/chenbei/vue\347\273\204\344\273\266.html"
new file mode 100644
index 0000000000000000000000000000000000000000..663cdcae00b6d5e688faeaf88cb9469958c82f4f
--- /dev/null
+++ "b/chenbei/vue\347\273\204\344\273\266.html"
@@ -0,0 +1 @@
+<!-- 作业：体验下vue个各个生命周期阶段,使用jquery去获取后端的接口数据，使用这些数据,渲染（还是建议写个商品列表） -->
diff --git "a/chenbei/\346\250\241\346\235\277\345\274\225\347\224\250\345\222\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html" "b/chenbei/\346\250\241\346\235\277\345\274\225\347\224\250\345\222\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c2b3a152e40da94b64969b559bb7d5e3560ade85
--- /dev/null
+++ "b/chenbei/\346\250\241\346\235\277\345\274\225\347\224\250\345\222\214\350\207\252\345\256\232\344\271\211\346\214\207\344\273\244.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>
+<style>
+
+</style>
+<body>
+    <div class="form">
+        用户名:<input type="text" name="user" ref="getUserValue">
+        <br>
+        密码：<input type="password" name="password" id="" ref="getPasswordValue">
+        <br>
+        <p v-type='errcolor' v-show="login" >用户名或密码有误!</p>
+        <input type="submit" value="验证" @click="sub">
+       
+        <!-- <el-form>
+            <el-input v-model="" placeholder="输入用户邮箱">
+        </el-form> -->
+    </div>
+</body>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<script>
+    Vue.createApp({
+        data:function(){
+            return{
+                user:'1235',
+                password:'1234567',
+                errcolor:'red',
+                login:false,
+                font_size:'10px',
+            }    
+        },
+        methods:{
+            sub(){
+                // console.log(this.$refs.getUserValue.value);
+                // console.log(this.$refs.getPasswordValue.value);
+                // console.log(this.user);
+                // console.log(this.password);
+                let getPassword = this.$refs.getPasswordValue.value;
+                let getUser = this.$refs.getUserValue.value;
+                const a= true;
+                if(getUser != this.user || getPassword != this.password){
+                    console.log("用户名或密码有误");
+                   this.login = true;
+                }else{
+                    alert("验证成功！")
+                }
+            }
+        },
+        directives:{
+            type:function(el,binding){
+                let color = binding.value;
+                // console.log(color);
+                el.style.color = color;
+            },
+        }
+    }).mount("body")
+</script>
+</html>
\ No newline at end of file
