vue 自定义指令

"Hello World, Hello Blog"

Posted by wudimingwo on December 15, 2018
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div id="app">
           <input type="text" v-focus:abc.first.last="val"  v-model="val"/>
           <div></div>
         </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script type="text/javascript">
              Vue.directive('focus',{
                bind (el,binding,vnode,oldVnode) {
                  console.log(el,binding,vnode,oldVnode);
                  console.log("bind");
                },
                inserted(el,binding,vnode,oldVnode) {
                  console.log(el,binding,vnode,oldVnode);
                  console.log("inserted");
                  el.focus();
                },
                update (el,binding,vnode,oldVnode) {
                  console.log(el,binding,vnode,oldVnode);
                  console.log("update");
                  
                },
                componentUpdated (el,binding,vnode,oldVnode) {
                  console.log(el,binding,vnode,oldVnode);
                  console.log("componentUpdated");
                  
                },
                unbind (el,binding,vnode,oldVnode) {
                  console.log(el,binding,vnode,oldVnode);
                  console.log("unbind");
                  
                }
              })
          
            var app = new Vue({
              el : "#app",
              data : {
                val : "a"
              }
            })

image.png