From 8fca0b2b3f8f0ba65e718b29b903a0962fc66176 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=B4=E4=BD=B3=E8=BE=895?= <1197986048@qq.com>
Date: Sat, 25 Mar 2023 10:31:21 +0000
Subject: [PATCH 1/4] 11
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 戴佳辉5 <1197986048@qq.com>
---
 .../demo.html"                                |  92 +++++++++++++++
 .../demo.html"                                | 107 ++++++++++++++++++
 2 files changed, 199 insertions(+)
 create mode 100644 "20230323-Vue\346\241\206\346\236\266/demo.html"
 create mode 100644 "20230325-Vue\345\210\227\350\241\250\345\244\204\347\220\206/demo.html"
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 0000000..6bcb495
--- /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 0000000..7ed2d23
--- /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
-- 
Gitee


From 44b78c70683cc89c50984351000d4773863a18e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=B4=E4=BD=B3=E8=BE=895?= <1197986048@qq.com>
Date: Sat, 25 Mar 2023 10:32:19 +0000
Subject: [PATCH 2/4] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20READ?=
 =?UTF-8?q?ME.en.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.en.md | 36 ------------------------------------
 1 file changed, 36 deletions(-)
 delete mode 100644 README.en.md

diff --git a/README.en.md b/README.en.md
deleted file mode 100644
index b136d60..0000000
--- 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
-- 
Gitee


From 24c637e4b1f1637c33cfafacf0b43afca6d550cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=B4=E4=BD=B3=E8=BE=895?= <1197986048@qq.com>
Date: Sat, 25 Mar 2023 10:32:25 +0000
Subject: [PATCH 3/4] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20READ?=
 =?UTF-8?q?ME.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 37 -------------------------------------
 1 file changed, 37 deletions(-)
 delete mode 100644 README.md

diff --git a/README.md b/README.md
deleted file mode 100644
index 85aceae..0000000
--- 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/)
-- 
Gitee


From db7bb47ca3d3c2e18df01c0efd02d4950c9e7aa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=B4=E4=BD=B3=E8=BE=895?= <1197986048@qq.com>
Date: Mon, 27 Mar 2023 15:09:33 +0000
Subject: [PATCH 4/4] 11
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 戴佳辉5 <1197986048@qq.com>
---
 .../demo.html"                                | 142 ++++++++++++++++++
 1 file changed, 142 insertions(+)
 create mode 100644 "20230327-Vue\345\242\236\345\210\240/demo.html"

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 0000000..886c75b
--- /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
-- 
Gitee

