diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
new file mode 100644
index 0000000000000000000000000000000000000000..2e0c92e5ce87c1e46ccd6cc9943ef5f5982680b1
Binary files /dev/null and b/.vs/slnx.sqlite differ
diff --git "a/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/.keep" "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/.keep" "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340830\347\216\213\344\273\201\351\200\232/work.html" "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340830\347\216\213\344\273\201\351\200\232/work.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fef9ae74fd5116be80e2d9e0f4787a69ec77a115
--- /dev/null
+++ "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340830\347\216\213\344\273\201\351\200\232/work.html"
@@ -0,0 +1,73 @@
+<!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@3.2.38/dist/vue.global.min.js"></script>
+  <style>
+  </style>
+</head>
+
+<body>
+  <div id="app">
+    <h1>自动选中</h1>
+    <input type="text" v-focus>
+    <hr>
+    <h1>v-model+trim</h1>
+    <input type="text" v-mmodel="msg">
+    <h1>{{msg}}</h1>
+    <hr>
+    <button v-mon:click="changeMsg">changeMsg</button>
+  </div>
+</body>
+<script>
+  Vue.createApp({
+    data() {
+      return {
+        msg: '123456'
+      }
+    },
+    methods: {
+      changeMsg() {
+        this.msg = 'wng'
+      }
+    },
+    directives: {
+      focus: {
+        mounted: (el) => el.focus()
+      },
+      mmodel: {
+        mounted: (el, bindings, vnode) => {
+          //绑定值到input的value上
+          el.value = bindings.value.trim()
+          if (bindings.modifiers.trim) {
+            //改变时发送事件改变data中的值
+            el.oninput = e => {
+              //赋值组件实例对象
+              bindings.instance['msg'] = e.target.value.trim()
+            }
+          } else {
+            el.oninput = e => {
+              console.log(bindings)
+              bindings.instance['msg'] = e.target.value
+            }
+          }
+        }
+      },
+      mon: {
+        mounted(el, bindings) {
+          if (bindings.arg === 'click') {
+            el.onclick = e => {
+              bindings.instance['changeMsg']()
+            }
+          }
+        }
+      }
+    }
+  }).mount('#app')
+</script>
+
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/2\347\217\255/.keep" "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/2\347\217\255/.keep"
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git "a/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340830\347\216\213\344\273\201\351\200\232/work.html" "b/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340830\347\216\213\344\273\201\351\200\232/work.html"
new file mode 100644
index 0000000000000000000000000000000000000000..62481d4306c8f0efa5d0c3d93880c0076d65a74d
--- /dev/null
+++ "b/\347\254\254\345\205\255\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340830\347\216\213\344\273\201\351\200\232/work.html"
@@ -0,0 +1,126 @@
+<!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>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.38/dist/vue.global.min.js"></script>
+</head>
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+    }
+
+    #app {
+        display: flex;
+        justify-content: center;
+    }
+
+    .left {
+        margin-left: 20px;
+    }
+</style>
+
+<body>
+    <div id="app">
+        <table>
+            <tr>
+                <td>姓名：</td>
+                <td>
+                    <input type="text" v-model="name">
+                </td>
+            </tr>
+            <tr>
+                <td>性别：</td>
+                <td>
+                    <label for="man">男
+                        <input type="radio" name="" id="man" value="man" v-model="sex">
+                    </label>
+                    <label for="woman">女
+                        <input type="radio" name="" id="woman" value="woman" v-model="sex">
+                    </label>
+                </td>
+            </tr>
+            <tr>
+                <td>爱好：</td>
+                <td>
+                    <label for="">
+
+                        <input type="checkbox" name="" id="" value="下棋" v-model="lover">
+                        下棋</label>
+                    <label for="">
+
+                        <input type="checkbox" name="" id="" value="篮球" v-model="lover">
+                        篮球</label>
+                </td>
+            </tr>
+            <tr>
+                <td>职业：</td>
+                <td>
+                    <select name="" id="" multiple v-model="pro">
+                        <option value="老板">老板</option>
+                        <option value="软件工程师">软件工程师</option>
+                        <option value="老师">老师</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td>个人简介：</td>
+                <td>
+                    <textarea name="" id="" v-model="info" cols="30" rows="10"></textarea>
+                </td>
+            </tr>
+            <tr>
+                <td>城市：</td>
+                <td>
+                    <select name="" id="" v-model="city">
+                        <option value="北京">北京</option>
+                        <option value="厦门">厦门</option>
+                        <option value="福州">福州</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <label for="agr">
+                        <input type="checkbox" name="" v-model="isAgree" id="agr">
+                        同意
+                    </label>
+                    <button :disabled="!isAgree" @click="isShow='true'">提交</button>
+                </td>
+            </tr>
+        </table>
+        <div class="left">
+            <template v-if="isShow">
+                <h1>您的个人信息是：</h1>
+                <h2>用户名：{{name}}</h2>
+                <h2>性别：{{sex}}</h2>
+                <h2>爱好：{{lover}}</h2>
+                <h2>职业：{{pro}}</h2>
+                <h2>个人简介：{{info}}</h2>
+                <h2>城市：{{city}}</h2>
+            </template>
+        </div>
+    </div>
+</body>
+<script>
+    Vue.createApp({
+        data() {
+            return {
+                name: '',
+                sex: '',
+                lover: [],
+                pro: [],
+                info: '',
+                city: '',
+                isAgree: false,
+                isShow: false
+            }
+        }
+    }).mount('#app')
+</script>
+
+</html>
\ No newline at end of file

姓名：	+ +
性别：	+ 男 + + + 女 + + +
爱好：	+ + + + 下棋 + + + + 篮球 +
职业：	+ +
个人简介：	+ +
城市：	+ +
+ + + 同意 + + +