diff --git "a/\350\246\203\346\210\220\345\233\255/2022.03.29Vue\351\241\265\351\235\242/Vue.html" "b/\350\246\203\346\210\220\345\233\255/2022.03.29Vue\351\241\265\351\235\242/Vue.html"
new file mode 100644
index 0000000000000000000000000000000000000000..33fdef997b1401784245d1bb1dbd82d09cb9b8d2
--- /dev/null
+++ "b/\350\246\203\346\210\220\345\233\255/2022.03.29Vue\351\241\265\351\235\242/Vue.html"
@@ -0,0 +1,46 @@
+<!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/dist/vue.js"></script>
+    <title>第一个Vue案例</title>
+</head>
+<body>
+    <h5>vue就是实现了MVVM的一个js框架,从文件角度看vue是一个js文件，从数据结构角度去看vue是一个对象(js的class对象底层是个function)</h5>
+    <div>
+        <div id="el">
+            {{message}}<br>
+            {{show}}
+        </div>
+    </div>
+</body>
+<script>
+    let vm=new Vue({
+        el:"#el",
+        data:{
+            message:'hello vue',
+            show:"hello,Vue. lt's my first contact you. i'm mot sure. Let's chheer together. Let's be happy every day.",
+        }
+    });
+    //对象可以调用属性方法，该如何去调用呢？
+    //第一种调用方式：
+    console.log(vm.$el);
+    //第二种调用方式：
+    //原生的js获取DOM元素：
+    console.log(document.getElementById("el"));
+    console.log(vm.$el===document.getElementById("el"));
+    //第三种调用方式:
+    //data数据调取：
+    //data调取方法一：可以更直观的看出data的数据调取：
+    console.log(vm.$data.message);
+    //data调取方法二：调取方式更便捷，但是数据的调取表达不太直观：
+    console.log(vm.message);
+    //第四种调用方式：
+    //watch方法：
+    vm.$watch('message',function(newValue,oldVaule){
+        console.log(newValue,oldVaule);
+    });
+</script>
+</html>
+
diff --git "a/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/1.jpg" "b/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3b2828a27ac1a51c2e0768ca1fe8a78641892bd7
Binary files /dev/null and "b/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/1.jpg" differ
diff --git "a/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/11.html" "b/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/11.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6aa8d0b065aa262f9ccd62bc4d2596335ba09fe6
--- /dev/null
+++ "b/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/11.html"
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>注册页面</title>
+    <style>
+        *{
+            padding: 0;
+            margin: 0;
+        }
+        body{
+            background:url(1.jpg) no-repeat center;
+            background-size: cover;
+            padding: 0;
+        }
+    </style>
+</head>
+
+<body >
+        
+    <!-- 定义表单 -->
+    <div align="center">
+           <fieldset style="width:600px;height:600px;border:1px solid paleturquoise;padding:10px;margin-bottom:55px;display:block;" > 
+            <legend align="center"><h2>注册列表</h2></legend>
+             <form action='#l' method='post' style="align-content: center;">
+
+                        <table>
+                                <tr>
+                                        <td><label for='username'>昵称:</label></td>
+                                        <td><input id="a" type='text'   name='username' id='username' placeholder="请输入昵称"></td>
+                                    </tr>
+                                <tr>
+                                        <td><label for='password'>密码:</label></td>
+                                        <td><input id="b" type='password'   name='password' id='password' placeholder="请输入密码">
+                        </td>
+                                    </tr>
+                                <tr>
+                                
+                    <tr>
+                                <td><label for='password'>确认密码:</label></td>
+                                <td><input id="c" type='password'   name='password' id='password' placeholder="请确认密码"></td>
+                            </tr>
+                        <tr>
+                                        <td><label for='email'>Email:</label></td>
+                                        <td><input id="d" type='email'   name='email' id='email' placeholder="请输入邮箱"></td>
+                                    </tr>
+                                <tr>
+                                        <td><label for='name'>姓名:</label></td>
+                                        <td><input id="e" type='text'   name='name' id='name' placeholder="请输入姓名"></td>
+                                    </tr>
+                                
+                                
+                                <tr>
+                                        <td><label for='tel'>手机号:</label></td>
+                                        <td><input id="f" type='text'   name='tel' id='tel' placeholder="请输入手机号">
+                                        <button>获取验证码</button>
+                                        </td>
+
+                                    </tr>
+                                <tr>
+                                        <td><label>性别:</label></td>
+                                        <td>
+                            <input type='radio'   name='gender' value='male'>男
+                                                <input type='radio'   name='gender' value='female'>女
+                                            </td>
+                                    </tr>
+                                <tr>
+                                        <td><label for='birthday'>出生日期:</label></td>
+                                        <td><input type='date'   name='birthday' id='birthday'></td>
+                                    </tr>
+                                <tr>
+                                        <td><label for='checkcode'>验证码:</label></td>
+                        <td><input type='text'   name='checkcode' id='checkcode' placeholder="请输入验证码">
+                    </tr>
+                                <tr>
+                                        <td colspan='2'   align='center'><input type='submit'   value='注册'>
+                                        
+                                            </td>
+                                    </tr>
+                            
+                            
+                </table>
+                  
+                    </form>  
+        </fieldset>  
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/login.css" "b/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/login.css"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/text01.html" "b/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/text01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8011370691daad4a78035921b7b3525926a3fc3a
--- /dev/null
+++ "b/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/text01.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>my register</title>
+</head>
+
+<body>
+    <div style="display:flex;justify-content:center;margin-top:150px">
+        <el-card style="width: 500px;">
+            <div slot="header" class="clearfix">
+            </div>
+            <table>
+                <tr>
+                    <td>
+                        输入昵称:
+                    </td>
+                    <td>
+                        <input type="text" placeholder="请输入昵称">
+
+                    </td>
+                </tr>
+
+                <tr>
+                    <td>
+                        输入密码:
+                    </td>
+                    <td>
+                        <input type="password" v-model="uesr.password" placeholder="请输入密码">
+
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        确认密码:
+                    </td>
+                    <td>
+                        <input type="password" placeholder="确认密码">
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        输入号码:
+                    </td>
+
+                    <td>
+                        <input type="text" placeholder="请输入手机号"><button>获取验证码</button>
+                    </td>
+
+                </tr>
+                <!-- shttps://blog.csdn.net/weixin_43154842/article/details/83029337 -->
+            </table>
+            <button>立即注册</button>
+            </el->
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/text02.html" "b/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/text02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a0ccfff25d7f719b3af1c0c2cb4e5c08af83eb8d
--- /dev/null
+++ "b/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/text02.html"
@@ -0,0 +1,67 @@
+<!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"></script>
+</head>
+<style>
+    body{
+        background-color: #d8d6d0;
+       
+    }
+    .box {
+        text-align: center;
+        width: 380px;
+        height: 500px;
+        position: absolute;
+        left: 500px;
+        top: 150px;
+        
+    }
+    input{
+        width: 170px;
+        height: 20px;
+        border-color: azure;
+    }
+    
+</style>
+<body>
+
+    <!-- 写一个注册页面，美观点，然后用vue 进行渲染，要有手机号注册，要有密码，确认密码，要进行数据验证，手机格式验证，密码6位以上的验证，确认密码于密码一致性的验证 -->
+    <div class="box"  >
+    <form action="" method="get" v-on:submit.prevent="click">
+            <h2>注册页面</h2>
+            <fieldset>
+                <legend>请填写以下信息</legend>
+                用&nbsp;户&nbsp;名 :<input type="text" name="name" required ><br><br>
+
+                密 &nbsp;&nbsp;&nbsp;    码 : <input type="password" name="password" id="p1" 
+                placeholder="以字母开头密码为6位数以上" pattern="^[a-zA-Z]\w{5,17}$" ><br><br>
+
+                确认密码:<input type="password" name="repeapwd" id="p2" pattern="^[a-zA-Z]\w{5,17}$"><br><br>
+
+                <button>登录</button>
+            </fieldset>
+        
+           
+
+    </form>
+</div>
+</body>
+<script>
+    let vue =new Vue({
+        el:'.box',
+        methods:{
+            click:function(){
+              if(document.getElementById('p1').value==document.getElementById('p2').value){
+                  window.location.href='text03.html'
+              }
+            },
+          
+        }
+    });
+</script>
+</html>
\ No newline at end of file
diff --git "a/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/text03.html" "b/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/text03.html"
new file mode 100644
index 0000000000000000000000000000000000000000..50703d5bee2c6cdae664c3a4424a127208f29d2b
--- /dev/null
+++ "b/\350\246\203\346\210\220\345\233\255/2022.03.31vue\346\270\262\346\237\223html\347\231\273\345\275\225\351\241\265\351\235\242/text03.html"
@@ -0,0 +1,123 @@
+<!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/dist/vue.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+    <title>Document</title>
+</head>
+<style>
+    body {
+        background-image: url(./img/刘亦菲.jpg);
+        opacity: 0.9;
+    }
+
+    .color {
+        color: red;
+    }
+
+    .active {
+        display: none;
+    }
+
+    #role {
+        width: 300px;
+        height: 300px;
+        left: 520px;
+        top: 20px;
+        padding: 80px;
+        background-color: white;
+        opacity:0.8;
+        position: absolute;
+        border-radius: 20px;
+
+    }
+</style>
+
+<body>
+
+    <!-- <img v-bind:src="刘亦菲" alt=""> -->
+    <div id="role">
+        <h3>揭秘女明星每天哈哈的排名</h3>
+        <!-- @：表示vue语法中v-on的简写；绑定事件的专用格式。当事件触发的时候，函数才会来调用 -->
+        <button @click="btnClick" style="cursor: pointer;">点击我会有惊喜哦</button>
+
+        <div v-if="seen" :class="myClass" v-for="role in newRoles">
+            {{role.name}} / {{role.grade}}
+        </div>
+
+        <ol>
+            <p v-for="role in roles">{{role.name}} / {{role.grade}}</p>
+        </ol>
+        请选择你喜欢的女明星： <select name="" id="">
+            <option value="一号">一号六鳌</option>
+            <option value="二号">二号蔡羽飞</option>
+            <option value="三号">三号皇鹂坊</option>
+            <option value="四号">四号🐏</option>
+            <option value="五号">五号离线穷</option>
+        </select><br><br>
+
+
+        <button v-on:click="tj" style="position: absolute;left: 250px;cursor: pointer;">提交</button>
+
+    </div>
+
+</body>
+<script>
+
+    let role = new Vue({
+        el: "#role",
+        data: {
+            seen: true,
+            roles: [
+                {
+                    name: '三号女明星：皇鹂坊',
+                    grade: '优秀'
+                },
+                {
+                    name: '四号女明星：🐏',
+                    grade: '良好'
+                },
+                {
+                    name: '五号女明星：离线穷',
+                    grade: '一般'
+                },
+            ],
+            newRoles: [
+                {
+                    name: '一线女明星一号：六鳌',
+                    grade: '超级精品',
+                },
+                {
+                    name: '一线女明星二号：蔡羽飞',
+                    grade: '精品',
+                },
+
+            ],
+            myClass: {
+                color: true,
+                active: true,
+            }
+        },
+
+        methods: {
+            btnClick: function () {
+                // this.seen = !this.seen; 
+                this.myClass.active = !this.myClass.active;
+            },
+            tj: function () {
+                alert('提交成功,谢谢你的投票哦！');
+                // console.log(hhh);
+            }
+        }
+
+
+
+
+    })
+
+</script>
+
+</html>
\ No newline at end of file

昵称:
密码:	+
确认密码:
Email:
姓名:
手机号:	+ +
性别:	+ 男 + 女 +
出生日期:
验证码:	+
+ +
+ 输入昵称: +	+ + +
+ 输入密码: +	+ + +
+ 确认密码: +	+ +
+ 输入号码: +	+ +