diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31Vue\346\263\250\345\206\214\351\241\265\351\235\242\351\241\265\351\235\242/Vue\344\272\213\344\273\266.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31 Vue\346\263\250\345\206\214\351\241\265\351\235\242/Vue\344\272\213\344\273\266.html"
similarity index 100%
rename from "\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31Vue\346\263\250\345\206\214\351\241\265\351\235\242\351\241\265\351\235\242/Vue\344\272\213\344\273\266.html"
rename to "\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31 Vue\346\263\250\345\206\214\351\241\265\351\235\242/Vue\344\272\213\344\273\266.html"
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31Vue\346\263\250\345\206\214\351\241\265\351\235\242\351\241\265\351\235\242/register.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31 Vue\346\263\250\345\206\214\351\241\265\351\235\242/register.html"
similarity index 100%
rename from "\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31Vue\346\263\250\345\206\214\351\241\265\351\235\242\351\241\265\351\235\242/register.html"
rename to "\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31 Vue\346\263\250\345\206\214\351\241\265\351\235\242/register.html"
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31Vue\346\263\250\345\206\214\351\241\265\351\235\242\351\241\265\351\235\242/vue.js" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31 Vue\346\263\250\345\206\214\351\241\265\351\235\242/vue.js"
similarity index 100%
rename from "\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31Vue\346\263\250\345\206\214\351\241\265\351\235\242\351\241\265\351\235\242/vue.js"
rename to "\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31 Vue\346\263\250\345\206\214\351\241\265\351\235\242/vue.js"
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31Vue\346\263\250\345\206\214\351\241\265\351\235\242\351\241\265\351\235\242/\344\277\256\351\245\260\347\254\246.txt" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31 Vue\346\263\250\345\206\214\351\241\265\351\235\242/\344\277\256\351\245\260\347\254\246.txt"
similarity index 100%
rename from "\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31Vue\346\263\250\345\206\214\351\241\265\351\235\242\351\241\265\351\235\242/\344\277\256\351\245\260\347\254\246.txt"
rename to "\346\234\261\347\276\216\346\236\227/Vue.js/2022-03-31 Vue\346\263\250\345\206\214\351\241\265\351\235\242/\344\277\256\351\245\260\347\254\246.txt"
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/goodslist.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/goodslist.html"
new file mode 100644
index 0000000000000000000000000000000000000000..26a39b5208b1bf02c651a48558c1f74201b43774
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/goodslist.html"	
@@ -0,0 +1,135 @@
+<!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">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <title>商品列表页</title>
+    <!-- 一个商品列表页，要有图片（可以使用外网），商品名，点击时要能弹出商品简介与图片名称 -->
+</head>
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    li {
+        list-style: none;
+    }
+
+    .tb-promo {
+        position: relative;
+        width: 400px;
+        height: 280px;
+        background-color: pink;
+        margin: 100px auto;
+    }
+
+    .tb-promo img {
+        display: block;
+        width: 400px;
+        height: 280px;
+    }
+
+    /* 并集选择器可以集体声明相同的样式 */
+    .prev,
+    .next {
+        position: absolute;
+        /* 绝对定位的盒子垂直居中 */
+        top: 50%;
+        margin-top: -15px;
+        /* 加了绝对定位的盒子可以直接设置高度和宽度 */
+        width: 20px;
+        height: 30px;
+        background: rgba(0, 0, 0, .3);
+        text-align: center;
+        line-height: 30px;
+        color: #fff;
+        text-decoration: none;
+    }
+
+    .prev {
+        left: 0;
+        /* border-radius: 15px; */
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+    }
+
+    .next {
+        /* 如果一个盒子既有left属性也有right属性，则默认会执行 left属性 同理  top  bottom  会执行 top */
+        right: 0;
+        /* border-radius: 15px; */
+        border-top-left-radius: 15px;
+        border-bottom-left-radius: 15px;
+    }
+
+    .promo-nav {
+        position: absolute;
+        bottom: 15px;
+        left: 50%;
+        margin-left: -35px;
+        width: 70px;
+        height: 13px;
+        /* background-color: pink; */
+        background: rgba(255, 255, 255, .3);
+        border-radius: 7px;
+    }
+
+    /* .promo-nav li {
+        float: left;
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+        border-radius: 50%;
+        margin: 3px;
+    }
+    /* 不要忘记选择器权重的问题 */
+    /* .promo-nav .selected {
+        background-color: #ff5000;
+    }  */
+</style>
+
+<body>
+    <div class="tb-promo" id="app">
+        <img :src="imgArr[index]" @click="click" alt="">
+        <!-- 左侧按钮箭头 -->
+        <a href="#" @click="prev" v-show="index!=0" class="prev"> &lt; </a>
+        <!-- 右侧按钮箭头 -->
+        <a href="#" @click="next" v-show="index<imgArr.length-1" class="next"> &gt; </a>
+    </div>
+    </div>
+</body>
+<script>
+    var vue = new Vue({
+        el: "#app",
+        data: {
+            imgArr: [
+                "./images/1.jpg",
+                "./images/2.jpg",
+                "./images/3.jpg",
+
+            ],
+            url:[
+        "https://item.taobao.com/item.htm?spm=a230r.1.14.123.44182140Zx6S8K&id=667467310757&ns=1&abbucket=6#detail",
+        "https://item.taobao.com/item.htm?id=655127984259&ali_refid=a3_430673_1006:1272640051:N:Wya8oF8tRaym%2BiOyaRhzPdlkgi%2FCwQMa:5987ba1f949b749e1b2cd9163141be47&ali_trackid=1_5987ba1f949b749e1b2cd9163141be47&spm=a2e0b.20350158.31919782.8",
+   "https://detail.tmall.com/item.htm?id=667688116510&ali_refid=a3_430673_1006:1109767909:N:emtiAWsF8+zhhxaiwzc0Aw==:eb6f5abaace18e0bbddd4ca8d8bb3b50&ali_trackid=1_eb6f5abaace18e0bbddd4ca8d8bb3b50&spm=a2e0b.20350158.31919782.41",
+ ],
+            index: 0,
+        },
+        methods: {
+            prev: function () {
+                this.index--;
+            },
+            next: function () {
+                this.index++;
+            },
+            click: function () {
+                window.location.href = this.url[this.index]
+            },
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/images/1.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/images/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..31d11cb027e5fc32b25035959a47e562a97fb34b
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/images/1.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/images/2.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/images/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6d90ac88dec628a5db2fa13b7d681de8c70e4a66
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/images/2.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/images/3.jpg" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/images/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0420c7584647dab499564ea9a117bc91e3e06db7
Binary files /dev/null and "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/images/3.jpg" differ
diff --git "a/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/listdeal.html" "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/listdeal.html"
new file mode 100644
index 0000000000000000000000000000000000000000..bbaaf4ba27e0b5604c059d8bafb0291640b63212
--- /dev/null
+++ "b/\346\234\261\347\276\216\346\236\227/Vue.js/2022-04-01 \345\225\206\345\223\201\351\241\265\351\235\242/listdeal.html"	
@@ -0,0 +1,74 @@
+<!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>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<!-- 改变原始数组的方法被称为变异方法。Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。
+    这些方法如下：push()、pop()、shift()、# # # unshift()、splice()、sort()、reverse()
+
+    非变异方法
+不会改变原始数组的方法被称为非变异方法。例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但 总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组以达到数据响应。
+
+由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
+1. 通过下标修改数据时
+2. 修改数组的长度时
+解决第一类问题：
+// Vue.set Vue.set(vm.items, indexOfItem, newValue);
+// Vue 就是类名，不要管 直接写 
+Vue.set(vm.items(let vue = new Vue()的vue)，
+indexOfItem 下标，newValue 新数据)
+ vm.$set(vm.items, indexOfItem, newValue);
+ // Array.prototype.splice
+  vm.items.splice(indexOfItem, 1, newValue); -->
+<body>
+    <div id="main">
+        <ul>
+            <li v-for="item in arr ">
+                {{item}}
+            </li>
+            <!--v-for 直接写在要遍历的元素上，不写在父元素上--->
+            <li v-for="(item,index) in arr " ><!---数组包含key-val vue都帮我们实现了 item 是元素，index是下标-->
+                {{item}},{{index+1}}
+            </li>
+
+            <li v-for="item in obj">{{item}}</li> <!--输出val-->
+            <li v-for="(item,key) in obj">{{item}},{{key}}</li> <!--输出val key-->
+            <li v-for="(item,key,index) in obj">{{item}},{{key}},{{index}}</li> <!--输出val key index-->
+
+            
+            <li v-for="(item,key) in fuzaobj">
+                <span v-if="key!='obj3'">{{item}}</span>
+                <span v-else="key=='obj3'">
+                     <span v-for="itm in item">{{itm}}</span>
+                </span>
+            </li>
+            <!--输出val-->
+        </ul>
+    </div>
+</body>
+<script>
+    //jquery $.get ,$.post  ajax 元素去写？？？？？
+    let vue = new Vue({
+        el: "#main",
+        data: {
+            arr: [60, 79, 80, 90],//数组没申明下标，以0 开头 arr 的下标 0，1，2，3
+            obj:{
+                obj1:'title',
+                obj2:'body',
+                //obj3:['php','java','js','python']
+            },
+            fuzaobj:{
+                obj1:'title',
+                obj2:'body',
+                obj3:['php','java','js','python'],//要再次遍历怎么遍历?
+            }
+        }
+    });
+</script>
+
+</html>
