Vue.directive注册指令

指令定义函数提供了几个钩子函数（可选）： vue指令的生命周期

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次，指令与元素解绑时调用。

   let app = new Vue({

         el:'#app',

         bind(){//进行绑定

         },

         inserted(){//进行插入

         },

         updata(){ //修改数据

         },

         componentUpdated (){ //修改以后

         },

         unbind(){ //解除绑定

         }

     })

// 注册一个全局自定义指令 v-focus

Vue.directive('focus', {

    // 当绑定元素插入到 DOM 中。

    inserted: function (el,binding) {

        <span style="white-space:pre;"> </span>// 聚焦元素

        <span style="white-space:pre;"> </span>el.focus();

    }

});  

new Vue({

　　el:'#app'

});

使用vue全局注册一个Vue的拖拽效果

Vue.directive('drag', {

    inserted:function(el){

        el.onmousedown=function(e){

            let l=e.clientX-el.offsetLeft;

            let t=e.clientY-el.offsetTop;

            document.onmousemove=function(e){

                el.style.left=e.clientX-l+'px';

                el.style.top=e.clientY-t+'px';

            };

            el.onmouseup=function(){

                document.onmousemove=null;

                el.onmouseup=null;

            }

        }

    }

})

new Vue({

　　el:'#app'

});

巴特西

Vue.directive注册指令

最新文章

热门文章