diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/.vscode/settings.json" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/.vscode/settings.json"
new file mode 100644
index 0000000000000000000000000000000000000000..6f3a2913e199cebe9ace75cf7e5a2818da27fbd3
--- /dev/null
+++ "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/.vscode/settings.json"
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/Vue\344\272\213\344\273\266.html" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/Vue\344\272\213\344\273\266.html"
new file mode 100644
index 0000000000000000000000000000000000000000..519aadac3b88bedb601bb63498a630b7f47454b2
--- /dev/null
+++ "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/Vue\344\272\213\344\273\266.html"
@@ -0,0 +1,56 @@
+<!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>vue 事件</title>
+</head>
+<body>
+    <div id="main" v-on:click=""><!--加不加（）都行-->
+          <form action="" method="get" v-on:submit.prevent="submit2" ><!--onsubmit="return false"-->
+             <input type="text" name='name'>
+             <input type="submit" value="提交">
+          </form>
+          <div class="bigger" style="width: 300PX;height: 200px;background:pink;" v-on:click="bigger"><!---bigger 包含了 small区域-->
+               <div class='small' v-on:click.stop="small" style="width:100px; height:100px;background: rebeccapurple;">小区域</div>
+          </div>
+          <div v-bind:class="classname"></div><!---常规的属性绑定-->
+          <div v-bind:[nm]="classname"></div><!---动态属性名称为驼峰书写时不行会报错,个人认为vue 会把驼峰的说法转成小写 attrname-->
+          <div V-on:[method]='click'>动态方法绑定</div>
+    </div>
+</body>
+<script>
+    let vue = new Vue({ //在源码里是个function，在js里 class 的底层也是function
+        el:'#main',//document.querySelector()
+        data:{
+            classname:'class123456',
+            param:'class',
+            nm:'id',
+            method:'click'
+        },
+        methods:{//事件写在 methods 中，记得是个复数
+            click:function(){
+                console.log("点击了")
+            },
+            submit:function(even){
+                even.preventDefault();//传递事件的方案去阻止默认行为
+                console.log("提交了")
+            },
+            submit2:function(){
+                console.log("提交了")
+            },
+            bigger:function(){
+                console.log("大区域被点击了")
+            },
+            small:function(even){
+                //even.stopPropagation();
+                console.log("小区域被点击了")
+            }
+
+        }
+
+    });
+</script>
+</html>
\ No newline at end of file
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/img/1.webp" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/img/1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..b5fb05e8b2c67f16cf5660020e52ff9f5495378c
Binary files /dev/null and "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/img/1.webp" differ
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/register.html" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/register.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1d621e02c542b71e636d9ca0182a48b877982bd9
--- /dev/null
+++ "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.3.30\346\263\250\345\206\214\351\241\265\351\235\242/register.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>
+    <!-- 写一个注册页面，美观点，然后用vue 进行渲染，要有手机号注册，要有密码，确认密码，要进行 数据验证，手机格式验证，密码6位以上的验证 -->
+    <!-- 确认密码于密码一致性的验证 -->
+</head>
+<style>
+
+    body {
+       
+        background-color:rgba(223, 73, 198, 0.281);
+    }
+
+    div {
+        width: 400px;
+        height: 300px;
+        margin: 15% 35%;
+        background-color: white;
+        border-radius: 5%;
+        border: solid 1px black;
+        display: grid;
+        align-content: center;
+        justify-content: center;
+        font-family: 方正舒体;
+        background-color:rgba(223, 73, 198, 0.281);
+    }
+
+   #button {
+        background-color: rgba(219, 20, 63, 0.5);
+        border-radius: 8px;
+    }
+
+</style>
+
+    <div id="main">
+        <form action="" method="get"  @submit.prevent="submit" name="form" @keyup.enter="submit" >
+            <fieldset>
+                <legend>注册 </legend>
+                <br>
+                <label for="username">用户名: <input type="text" name="username" id="username" placeholder="请输入用户名"  required></label><br><br>
+
+                <label for="password">密码: <input type="password" name="password" id="password" placeholder="请输入密码"required pattern="^[a-zA-Z]\w{0,9}$"></label><br><br>
+
+                <label for="notarizepassword">确认密码: <input type="password" name="password" id="notarizepassword" placeholder="请确认密码" required pattern="^[a-zA-Z]\w{5,17}$"></label><br><br>
+
+                <label for="phonenumber">手机号注册: <input type="tel" name="phonenumber" id="phonenumber"placeholder="请输入正确的11位手机号" required
+                      var  pattern=/^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/></label><br><br>
+                <input type="submit" value="注册" id="button">
+            </fieldset>
+        </form>
+    </div>
+</body>
+<script>
+    let data = {
+
+    };
+    let vue = new Vue({
+        el: "#main",
+        data: data,
+        methods: {
+            submit: function () {
+                if (document.getElementById('password').value == document.getElementById('notarizepassword').value) {
+                    window.location.href = 'baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=疫情';
+                }
+            }
+        }
+    })
+</script>
+<!-- https://blog.csdn.net/weixin_43154842/article/details/83029337?utm_term=vue.js做注册页面 -->
+</html>
\ No newline at end of file
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/.vscode/settings.json" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/.vscode/settings.json"
new file mode 100644
index 0000000000000000000000000000000000000000..6f3a2913e199cebe9ace75cf7e5a2818da27fbd3
--- /dev/null
+++ "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/.vscode/settings.json"
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/dfd.html" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/dfd.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c09e7ec5900435a9e6084d0d80630e5dd6661d2e
--- /dev/null
+++ "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/dfd.html"
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+</head>
+<body>
+    <div id="app-2">
+        <span v-bind:title="message">
+          鼠标悬停几秒钟查看此处动态绑定的提示信息！
+        </span>
+      </div>
+</body>
+<script>
+    var app2 = new Vue({
+  el: '#app-2',
+  data: {
+    message: '页面加载于 ' + new Date().toLocaleString()
+  }
+});
+//在控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定的提示信息已经进行了更新
+</script>
+</html>
\ No newline at end of file
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/goodslist.html" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/goodslist.html"
new file mode 100644
index 0000000000000000000000000000000000000000..694feb2da07e0203d3dd665e536e391e73bf0b3c
--- /dev/null
+++ "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/goodslist.html"
@@ -0,0 +1,125 @@
+<!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;
+    }
+
+</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",
+                "./images/4.jpg",
+            ],
+            url:[
+                "https://item.taobao.com/item.htm?id=601749907823",
+                "https://detail.tmall.com/item.htm?id=671785579449",
+                "https://detail.tmall.com/item.htm?id=642991995615",
+                "https://item.taobao.com/item.htm?id=648866828045"
+ ],
+            index: 0,
+        },
+        methods: {
+            prev: function () {
+                this.index--;
+            },
+            next: function () {
+                this.index++;
+            },
+            click: function () {
+                window.location.href = this.url[this.index]
+            },
+        }
+    })
+</script>
+
+</html>
+</html>
\ No newline at end of file
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/1.jpg" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f0c9dcd3365847c9b3cddc7b853934e43775cc1d
Binary files /dev/null and "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/1.jpg" differ
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/2.jpg" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4eb427b66e42802e94ab2b8bd68a8734030ea23c
Binary files /dev/null and "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/2.jpg" differ
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/3.jpg" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..15508c171b000dd75d676270206e359a4aaf27d2
Binary files /dev/null and "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/3.jpg" differ
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/4.jpg" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4a43f7979b9479daeb874dfd0447545cb9598aba
Binary files /dev/null and "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/2022.4.1\345\225\206\345\223\201\351\241\265\351\235\242/images/4.jpg" differ
