diff --git "a/20230323-Vue\346\241\206\346\236\266/demo.html" "b/20230323-Vue\346\241\206\346\236\266/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6bcb495d160e2501761a5ea5dad79d1aa86833d3
--- /dev/null
+++ "b/20230323-Vue\346\241\206\346\236\266/demo.html"
@@ -0,0 +1,92 @@
+
+</head>
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+    }
+    #goods {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        flex-wrap: wrap;
+    }
+    h1{ 
+        width: 100vw;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        margin-top: 2vw;
+        background-color: brown;
+    }
+    #lists{
+        display: flex;
+        flex-direction: column;
+        margin: 2vw;
+        font-size: 26px;
+    }
+    #box{
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        margin-top: 2vw;
+    }
+    #box lists{
+        width: 33.3vw;
+        height: auto;
+    }
+</style>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<body>
+    <!-- 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->
+    <div id="goods">
+        <h1>商品列表</h1>
+        <div id="box">
+        <div v-for="good in goods" id="lists">
+            <h2>名称：{{ good.name }}</h2>
+            <img v-bind:src="good.img" alt="" style="width: 500px;height: 400px;">
+            <p>描述：{{ good.describe }}</p>
+            <p>价格：￥{{good.price }}</p>
+        </div>
+    </div>
+    </div>
+</body>
+<script>
+    let app = Vue.createApp({
+        data: () => {
+            return {
+                goods: [
+                    {
+                        id: 1,
+                        name: '柴犬',
+                        describe: '像狗',
+                        price: '888',
+                        img: 'https://img0.baidu.com/it/u=4168664554,3249760368&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
+
+                    },
+                    {
+                        id: 2,
+                        name: '萨摩耶',
+                        describe: '长得很像狗',
+                        price: '999',
+                        img: 'https://img0.baidu.com/it/u=3438843980,916394742&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=762',
+
+                    },
+                    {
+                        id: 3,
+                        name: '威尔士柯基犬',
+                        describe: '很狗',
+                        price: '898',
+                        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp437468049.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682154473&t=9f89afe9a3c36348f61ad7a45f577dbc',
+
+                    }
+                ]
+            }
+        }
+    })
+
+    app.mount('#goods');
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/20230325-Vue\345\210\227\350\241\250\345\244\204\347\220\206/demo.html" "b/20230325-Vue\345\210\227\350\241\250\345\244\204\347\220\206/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7ed2d234c556fad968de6c940a100ebac69d5bfe
--- /dev/null
+++ "b/20230325-Vue\345\210\227\350\241\250\345\244\204\347\220\206/demo.html"
@@ -0,0 +1,107 @@
+<!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>
+    *{
+        padding: 0;
+        margin: 0;
+    }
+    #goods {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        flex-wrap: wrap;
+    }
+    h1{ 
+        width: 100vw;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        margin-top: 2vw;
+        background-color: brown;
+    }
+    #lists{
+        display: flex;
+        flex-direction: column;
+        margin: 2vw;
+        font-size: 26px;
+    }
+    #box{
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        margin-top: 2vw;
+    }
+    #box lists{
+        width: 33.3vw;
+        height: auto;
+    }
+</style>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+<body>
+    <!-- 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->
+    <!-- #### 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
+    <div id="goods">
+        <h1>商品列表</h1>
+        <div id="box">
+        <div v-for="good in goods" id="lists">
+            <div v-if="good.number!=100">
+                <h2>名称：{{ good.name }}</h2>
+                <img v-bind:src="good.img" alt="" style="width: 500px;height: 400px;">
+                <p>描述：{{ good.describe }}</p>
+                <p>价格：￥{{good.price }}</p>
+                <input type="text" v-model="good.number">
+                <p>剩余数量：{{100-good.number}}</p>
+            </div>
+            <div v-else>
+                <h2>{{ good.name }}库存为0</h2>
+            </div>
+        </div>
+    </div>
+    </div>
+</body>
+<script>
+    let app = Vue.createApp({
+        data: () => {
+            return {
+                goods: [
+                    {
+                        id: 1,
+                        name: '柴犬',
+                        describe: '像狗',
+                        price: '888',
+                        number:'0',
+                        img: 'https://img0.baidu.com/it/u=4168664554,3249760368&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
+
+                    },
+                    {
+                        id: 2,
+                        name: '萨摩耶',
+                        describe: '长得很像狗',
+                        price: '999',
+                        number:'0',
+                        img: 'https://img0.baidu.com/it/u=3438843980,916394742&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=762',
+
+                    },
+                    {
+                        id: 3,
+                        name: '威尔士柯基犬',
+                        describe: '很狗',
+                        price: '898',
+                        number:'0',
+                        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp437468049.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682154473&t=9f89afe9a3c36348f61ad7a45f577dbc',
+
+                    }
+                ],
+            }
+        }
+    })
+    app.mount('#goods');
+</script>
+</html>
\ No newline at end of file
diff --git "a/20230327-Vue\345\242\236\345\210\240/demo.html" "b/20230327-Vue\345\242\236\345\210\240/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..886c75b401d09f46b71c682fc3f3dadba38166dd
--- /dev/null
+++ "b/20230327-Vue\345\242\236\345\210\240/demo.html"
@@ -0,0 +1,142 @@
+<!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>
+    * {
+        padding: 0;
+        margin: 0;
+    }
+
+    #goods {
+        width: 100vw;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    h1 {
+        width: 100vw;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        margin-top: 2vw;
+        background-color: brown;
+    }
+
+    .lists {
+        display: flex;
+        flex-direction: column;
+        margin: 2vw;
+        font-size: 26px;
+    }
+
+    #box {
+        width: 100vw;
+        display: flex;
+        justify-content: center;
+        margin-top: 2vw;
+    }
+
+    #box lists {
+        display: flex;
+        flex: 1;
+        height: auto;
+    }
+</style>
+<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
+
+<body>
+    <!-- 作业：构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据    -->
+    <!-- #### 作业：在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量，给个input输入，输入1 对应的商品数据要 -1，如果剩余数量为0，不展示 -->
+    <!-- 作业： 上一节课基础上，添加  新增 和 删除的按钮,点新增 会加入对应的一条数据，点删除删除对应的商品 -->
+    <div id="goods">
+        <h1>商品列表</h1>
+        <div id="box">
+            <div v-for="(good,index) in goods" class="lists">
+                <div v-if="good.number>0">
+                    <h2>名称：{{ good.name }}</h2>
+                    <!-- <h2>{{good.id}}</h2> -->
+                    <img v-bind:src="good.img" alt="" style="width: 500px;height: 400px;">
+                    <p>描述：{{ good.describe }}</p>
+                    <p>价格：￥{{good.price }}</p>
+                    <p>剩余数量：{{good.number}}</p>
+                    <input type="number" v-model="good.buyNum">
+                    <br>
+                    <button @click="reduceNum(index)">减少数量</button>
+                    <button @click="addGoods(index)">新增</button>
+                    <button @click="deleteGoods(index)">删除</button>
+                </div>
+            </div>
+        </div>
+    </div>`
+</body>
+<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
+<script>
+        let app = Vue.createApp({
+        data: () => {
+            return {
+                goods: [
+                    {   
+                        id:0,
+                        name: '柴犬',
+                        describe: '像狗',
+                        price: '888',
+                        number: 100,
+                        buyNum: 1,
+                        img: 'https://img0.baidu.com/it/u=4168664554,3249760368&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
+
+                    },
+                    {
+                        id:1,
+                        name: '萨摩耶',
+                        describe: '长得很像狗',
+                        price: '999',
+                        number: 100,
+                        buyNum: 1,
+                        img: 'https://img0.baidu.com/it/u=3438843980,916394742&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=762',
+
+                    },
+                    {   
+                        id:2,
+                        name: '威尔士柯基犬',
+                        describe: '很狗',
+                        price: '898',
+                        number: 100,
+                        buyNum: 1,
+                        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp437468049.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1682154473&t=9f89afe9a3c36348f61ad7a45f577dbc',
+                    },
+                ],
+            }
+        },
+        methods: {
+            reduceNum: function (index) {
+                if (this.goods[index].number > 0) {
+                    this.goods[index].number -= this.goods[index].buyNum;
+                }
+            },
+            addGoods:function(index){
+                const newGoods = {
+                    id:this.goods.length,
+                    name:this.goods[index].name,
+                    describe:this.goods[index].describe,
+                    price:this.goods[index].price,
+                    number:this.goods[index].number,
+                    buyNum:this.goods[index].buyNum,
+                    img:this.goods[index].img
+                }
+                this.goods.push(newGoods);
+            },
+            deleteGoods:function(index){// 0 1 2 3 4 
+                let lists = document.getElementsByClassName("lists");
+                lists[index].remove()
+            }
+        }
+    })
+    app.mount('#goods');   
+</script>
+</html>
\ No newline at end of file
diff --git a/README.en.md b/README.en.md
deleted file mode 100644
index b136d60a38d4e8b4ea9431d0ac74f90ccfa5a443..0000000000000000000000000000000000000000
--- a/README.en.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# 21届7班vue作业
-
-#### Description
-学生作业
-
-#### Software Architecture
-Software architecture description
-
-#### Installation
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### Instructions
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### Contribution
-
-1.  Fork the repository
-2.  Create Feat_xxx branch
-3.  Commit your code
-4.  Create Pull Request
-
-
-#### Gitee Feature
-
-1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
-2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
-3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
-4.  The most valuable open source project [GVP](https://gitee.com/gvp)
-5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
-6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
\ No newline at end of file
diff --git a/README.md b/README.md
deleted file mode 100644
index 85aceae28aeb56d3c5563e2d3da327738ded9d78..0000000000000000000000000000000000000000
--- a/README.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# 21届7班vue作业
-
-#### 介绍
-学生作业
-
-#### 软件架构
-软件架构说明
-
-
-#### 安装教程
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### 使用说明
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### 参与贡献
-
-1.  Fork 本仓库
-2.  新建 Feat_xxx 分支
-3.  提交代码
-4.  新建 Pull Request
-
-
-#### 特技
-
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
-5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
