diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/css/index.css" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/css/index.css"
new file mode 100644
index 0000000000000000000000000000000000000000..887539353452c738e438c7caede854c3f33a69c8
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/css/index.css"
@@ -0,0 +1,40 @@
+* {
+    margin: 0 auto;
+    padding: 0;
+    background-color: seashell;
+
+}
+
+form {
+    margin-top: 200px;
+}
+.middle {
+    display: grid;
+    grid-template-columns:90px 300px;
+    grid-template-rows: repeat(4,80px);
+    justify-content: center;
+    align-items: center;
+}
+input {
+	width: 300px;
+	height: 40px;
+    padding-left: 12px;
+    /* -webkit-appearance:none;去除阴影边框 */
+    border: solid 1px chocolate;
+    border-radius: 10px;
+
+}
+.middle span {
+	justify-self: flex-end;
+	padding-right: 15px;
+
+}
+.middle .butt {
+    display: inline-grid;
+	width: 60px;
+    height: 40px;
+    border: solid 1px chocolate;
+    border-radius: 20px;
+    background-color: chocolate;
+    margin-left: 220px;
+}
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/registration.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/registration.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0e67774924d7daba40ed15c14ec537b8c119b65b
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/registration.html"
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>注册页面</title>
+    <link rel="stylesheet" href="./css/index.css">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+
+<body>
+    <form action="" class="middle">
+        <span>手机号:</span><input type="text" name="username"  placeholder="请输入手机号" required id="phone" @change="phone">
+        <span>密码:</span><input type="password" name="password" placeholder="请输入密码" required id="password" @change="password">
+        <span>确认密码:</span><input type="password" name="password" placeholder="确认密码" required id="confirm" @change="confirm">
+        <span></span> <button class="butt">注册</button>
+    </form>
+</body>
+<script>
+    let data = {
+
+
+    }
+    let vue = new Vue({
+        el: '.middle',
+        data: data,
+        name: "search",
+
+        methods: {
+            phone:function(){
+                let phone = document.getElementById('phone').value;
+                let reg = /^1[3-9][0-9]{9}$/;
+                if(!(reg.test(phone))){
+                    alert('请输入正确的手机号')
+                }
+
+            },
+            password:function(){
+                let password = document.getElementById('password').value;
+                let reg = /^[a-zA-Z0-9]{6,}$/;
+                if(!(reg.test(password))){
+                    alert('请输入6位以上的密码')
+                    
+                }
+            },
+            confirm:function(){
+                let password = document.getElementById('password').value;
+                let confirm = document.getElementById('confirm').value;
+                if(password != confirm){
+                    alert('两次密码输入不一致')
+                }
+
+            }
+        }
+    })
+    
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo01.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d1227877c727405e4de855416969f68e27f47c43
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo01.html"
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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">
+            <input type="text" name="name">
+            <input type="submit" value="提交">
+        </form>
+        <div class="bigger" v-on:click="bigger"style="margin: 10% 0; width:300px;height:200px;background-color:green;">
+            <div class="small" v-on:click.stop="small" style="width:100px; height:100px;background: red;">小区域</div>
+        </div>
+        <div v-bind:class="classname"></div>
+        <div v-bind:[nm]="classname"></div>
+        <div v-on:[method]='click'>动态方法绑定</div>
+    </div>
+</body>
+<script>
+    let vue = new Vue({
+        el:'#main',
+        data:{
+            classname:'class123', 
+            nm:'id',
+            method:'click'
+        },
+        methods:{
+            click:function(){
+                console.log("点击了");
+            },
+            submit:function(even){
+                even.preventDefault();//传递事件的方案去阻止默认行为
+                console.log("你真的有点提交");
+            },
+            submit2:function(){
+                console.log("你点击了提交按钮");
+            },
+            bigger:function(){
+                console.log("大区域被点击了");
+            },
+            small:function(){
+                //even.stopPropagation();
+                console.log("小区域被点击了");
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo02.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..617dc785de76b03667633c14c035541f1ce7f0eb
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-31vue/\350\257\276\345\240\202\347\254\224\350\256\260/demo02.html"
@@ -0,0 +1,43 @@
+<!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>
+</head>
+
+<body>
+    <div id="main">
+        <div>
+            {{msg}}
+        </div>
+    </div>
+    <!-- <div id="main2"></div> -->
+</body>
+<script>
+   let vue = new Vue({
+    //    el:"#main",
+       data:{
+           msg:'我是消息'
+       },
+       beforeCreate:function(){//初始化之前，原本访问属性 vue.msg,能不能去访问data的数据
+          console.log(this.msg);//如果解析data 成功了，可以通过 this.msg 访问,this 就是表示构建的这个对象
+       },
+       created:function(){//data已经初始化完成
+            console.log(this.msg);
+           
+       },
+       beforeMount:function(){//在moun之前，vue 会把el对于的dom元素选取，data数据解析，但是还没显示在页面中，它存在内存中
+        console.log(this.msg);//怎么去看元素又没被渲染成功?
+        console.log(this);//这时候都生成了渲染后的html
+       },
+       mount:function(){//替换掉了 el元素，已经挂在到了html页面中
+
+       }
+   });
+   vue.$mount("#main");
+   // obj.show() ,obj.handle()//就是具体的构建过程
+</script>    
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-4-01vue/demo01.html" "b/\351\273\204\346\266\246\345\261\261/2022-4-01vue/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..de909bb000b043fe1d8cf32a705ba2dfd62b72be
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-4-01vue/demo01.html"
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <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>
+
+<style>
+    :root {
+        --width: 100%;
+    }
+
+    * {
+        margin: 0;
+        padding: 0;
+        background-color: gainsboro;
+    }
+
+    ul {
+        column-width: 180px;
+        column-gap: 100px;
+        margin: 0 5% 0 5%;
+        list-style-type: none;
+    }
+
+    li {
+        width: 150px;
+        height: 250px;
+        text-align: center;
+        cursor: pointer;
+    }
+
+    img {
+
+        width: 150px;
+        display: inline-flex;
+        margin-top: 50px;
+    }
+
+    span {
+        color: deeppink;
+    }
+</style>
+
+<body>
+    <div id="main">
+        <ul>
+            <li v-for="(i,key) in goods" @click="click(key)">
+                <img v-bind:src="i.img" :alt="i.alt">
+                <span>{{i.name}}</span>
+            </li>
+
+        </ul>
+    </div>
+
+</body>
+<script>
+    let vue = new Vue({
+        el: "#main",
+
+        data: {
+            goods: [
+                {
+                    img: 'https://img13.360buyimg.com/jdcms/s150x150_jfs/t1/148049/19/26938/79650/623933a7E81bf506e/a3a062dd54f4ba5a.jpg.webp',
+                    name: '水杯',
+                    alt: '水杯',
+                },
+                {
+                    img: 'https://img10.360buyimg.com/jdcms/s150x150_jfs/t1/95654/2/63/178279/5da6bc30E9d74e5f4/173751d8100a0384.jpg.webp',
+                    name: '纯牛奶',
+                    alt: '纯牛奶',
+                },
+                {
+                    img: 'https://img20.360buyimg.com/jdcms/s150x150_jfs/t1/179603/34/22315/131853/62451a92E96fe9f51/3b5f90655bc29ada.jpg.webp',
+                    name: '空调',
+                    alt: '空调',
+                },
+                {
+                    img: 'https://img10.360buyimg.com/jdcms/s150x150_jfs/t1/181006/2/21848/209997/62456ed9Eb611003b/e755a4417e01cc29.jpg.webp',
+                    name: '双人沙发',
+                    alt: '双人沙发',
+                    click: 'click4'
+                },
+                {
+                    img: 'https://img30.360buyimg.com/jdcms/s150x150_jfs/t1/223510/18/8067/238763/623ad2f2E761374d6/5bd46ef2c687fb39.jpg.webp',
+                    name: '办公桌',
+                    alt: '办公桌',
+                },
+                {
+                    img: 'https://img14.360buyimg.com/jdcms/s150x150_jfs/t1/97735/23/26077/231812/6245e837Ec7ae4723/785c9b31e60b5943.jpg.webp',
+                    name: '安慕希',
+                    alt: '安慕希',
+                },
+            ],
+            lai:
+                [
+                    '这是一个水杯，不瞎应该看得出来',
+                    '这是一个纯牛奶，不瞎应该看得出来',
+                    '这是一个空调，不瞎应该看得出来',
+                    '这是一个双人沙发，不瞎应该看得出来',
+                    '这是一个办公桌，不瞎应该看得出来',
+                    '这是一个安慕希，不瞎应该看得出来',
+                ]
+        },
+        methods: {
+
+            click: function (key) {
+                console.log('第' + parseInt(key + 1) + '个')
+                alert(vue.lai[key]);
+            },
+
+        },
+    })
+</script>
+
+</html>
\ No newline at end of file
