diff --git "a/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/index.html" "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6c0e06c7e51824be2cd7c1b59355d67d28122599
--- /dev/null
+++ "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/index.html"
@@ -0,0 +1,34 @@
+<!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="js/vue.js"></script>
+</head>
+<body>
+    <div id="app">
+        <input type="text" v-model="name">
+        <Button @click="add()">添加</Button>
+
+        <ul>
+            <li v-for="item in arrys">{{item}}</li>
+        </ul>
+    </div>
+</body>
+<script>
+    var vue = new Vue({
+        el:"#app",
+        data:{
+            arrys:['张三','王五'],
+            name:''
+        },
+        methods:{
+            add(){
+                arrys = this.arrys.push(this.name)
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/index2.html" "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/index2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b23b660066cbd1266f5a0756d29113590e4366c1
--- /dev/null
+++ "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/index2.html"
@@ -0,0 +1,31 @@
+<!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="js/vue.js"></script>
+</head>
+<body>
+    <div id="app">
+        <img src="img/xx.png" alt="" @mouseover="over()" @mouseout="out()"  :style="op" >
+    </div>
+</body>
+<script>
+    var vue = new Vue({
+        el:"#app",
+        data:{
+            op:"opacity: 100",
+        },
+        methods:{
+            over(){
+                this.op = "opacity: 0.6"
+            },
+            out(){
+                this.op = "opacity: 100"
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/index3.html" "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/index3.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c3fef5c3f48502c9f1173cd81330c51d7582416e
--- /dev/null
+++ "b/\347\254\254\344\270\200\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/index3.html"
@@ -0,0 +1,31 @@
+<!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="js/vue.js"></script>
+</head>
+<body>
+    <div id="app">
+        <img :src="src" alt="" @mouseover="over()" @mouseout="out()" >
+    </div>
+</body>
+<script>
+    var vue = new Vue({
+        el:"#app",
+        data:{
+            src:"img/xx.png",
+        },
+        methods:{
+            over(){
+                this.src = "img/2.png"
+            },
+            out(){
+                this.src= "img/xx.png"
+            }
+        }
+    })
+</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/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/v-bind.html" "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/v-bind.html"
new file mode 100644
index 0000000000000000000000000000000000000000..720de12b5d807bcd62b24d9740d34f586c9d1390
--- /dev/null
+++ "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/v-bind.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">
+    <title>Document</title>
+</head>
+
+<body>
+    <script src="../js/vue.js"></script>
+    <div id="root">
+        <input type="text" v-focus-bind:value="name">
+
+    </div>
+    <script>
+        Vue.config.productionTip = false
+        var vm = new Vue({
+            el: '#root',
+            data: {
+                name: '小叶小叶'
+            },
+            directives:{
+                'focus-bind':{
+                    bind(el,binding){
+                        el[binding.arg] = binding.value
+                        el.onclick = function(){
+                            alert(binding.value)
+                        }
+                    },
+                    inserted(el,binding){
+                        console.log('inserted....')
+                        el.focus()
+                    }
+                    
+                }
+            }
+        })
+    </script>
+</body>
+
+</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/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/v-model.html" "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/v-model.html"
new file mode 100644
index 0000000000000000000000000000000000000000..21b4290bd4577dd757e97df9a5133d9abf4ee4ca
--- /dev/null
+++ "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/v-model.html"
@@ -0,0 +1,54 @@
+<!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>
+</head>
+
+<body>
+    <script src="../js/vue.js"></script>
+    <div id="root">
+        <input type="text" v-mymodel:value="name" >
+        <h1>{{name}}</h1>
+
+    </div>
+    <script>
+        Vue.config.productionTip = false
+        var vm = new Vue({
+            el: '#root',
+            data: {
+                name: '小叶小叶这是model'
+            },
+            methods: {
+    
+            },
+            directives: {
+                mymodel: {
+                    bind(element, binding, vnode) {
+                        binding.event='input'
+                        console.log(element)
+                        if (binding.modifiers.trim) {
+                            element.addEventListener(binding.event, function () {
+                                vnode.context[binding.expression] = element.value.trim()
+                            })
+                            element.value = binding.value.trim()
+                        } else {
+                            element.addEventListener(binding.event, function () {
+                                vnode.context[binding.expression] = element.value
+                            })
+                            element.value = binding.value
+                        }
+                    },
+                    update: function () {}
+                },
+
+            }
+
+        })
+    </script>
+</body>
+
+</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/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/v-on.html" "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/v-on.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c88201bca8ca55f80d6b68ece4348aa8c154190a
--- /dev/null
+++ "b/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232/1\347\217\255/20210340839\345\217\266\345\207\214\345\217\221/v-on.html"
@@ -0,0 +1,41 @@
+<!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>
+</head>
+<script src="../js/vue.js"></script>
+
+<body>
+    <div id="root">
+        <input type="text" v-myon:click="change">
+
+    </div>
+    <script>
+        Vue.config.productionTip = false
+        var vm = new Vue({
+            el: '#root',
+            data: {
+                count: 0
+            },
+            methods: {
+                change(){
+                    this.count++
+                    console.log('你好你点击了'+this.count+'次')
+                }
+            },
+            directives:{
+                myon:{
+                    bind(el,binding,vnode){
+                        el['on'+binding.arg]=binding.value
+                    },
+                }
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
