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'
});

转载于:https://www.cnblogs.com/l8l8/p/9150332.html

Vue.directive注册指令相关推荐

Vue directive 自定义指令
Vue自定义指令一共有5个钩子函数,分别是: bind.inserted.update.componentUpdate .unbind bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行 ...
Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...
vue.directive自定义指令 vue.set使用示例
VUE：自定义指令（directives ）选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
Vue 内置指令、自定义指令、过滤器
文章目录内置指令 v-text指令 v-html指令 v-cloak指令 v-once指令 v-pre指令自定义指令过滤器内置指令复习之前所学指令: v-bind:单向绑定解析表达式, 可简 ...
Vue技术—自定义指令
自定义指令总结一.定义语法: 1.局部指令 new Vue({ directives:{指令名:配置对象} }) 或 new Vue({ directives(指令名:回调函数) }) 2.全局指令 ...
vue中自定义指令Vue.directive(指令名, 对象)
1.自定义全局指令可以在不同的组件实例中使用, 也就是说在全局任意位置都可以使用Vue.directive(指令名, 对象); // 对象中定义了该指令的所有生命周期函数方法,也叫钩子函数Vue. ...
vue指令02---自动获取焦点（全局自定义指令Vue.directive()）和全局过滤器Vue.filter() 的学习...
1.1 自动获取焦点在自动获取焦点的学习中涉及到了一个钩子函数 mounted(),它表示页面一加载进来就执行函数里面的内容,(和window.onload相似,这样有助于理解),mounted 钩 ...
2.0 vue内置指令与自定义指令
一.概述模板在解析之前指令是存在的,但是解析完成以后就不存在了. 1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHT ...

Vue.directive注册指令

Vue.directive注册指令相关推荐

最新文章

热门文章