介绍 & lt; p id=癮pp"祝辞,
& lt; SPAN 风格=翱瞻?,pre"祝辞,& lt;/SPAN> & lt; input 类型=皌ext", v-focus/祝辞,
时间/p> & lt;
& lt; p id=癮pp"祝辞
,& lt; input 类型=皌ext", v-focus/比;
& lt;/p>//,注册一个全局自定义指令,v-focus ,
Vue.directive(& # 39;关注# 39;,,{,//才能,当绑定元素插入到,DOM 中只,
,,插入:function (el,绑定),{,
,,,& lt; SPAN 风格=翱瞻?,pre"祝辞,& lt;/SPAN>//,聚焦元素,,
,,,& lt; SPAN 风格=翱瞻?,pre"祝辞,& lt;/SPAN> el.focus (),,
,,},
}),,
Vue ({new
艾尔:& # 39;#应用# 39;,
}),,//,注册一个全局自定义指令,v-focus
Vue.directive(& # 39;关注# 39;,,{//才能,当绑定元素插入到,DOM 中。
,,插入:function (el,绑定),{
,,//,聚焦元素
,,el.focus ();
,}
});
Vue ({new
艾尔:& # 39;#应用# 39;
}); & lt; style 类型=拔谋?css"祝辞,
,。:({大敌;
,,,身高:100 px,,
,,,宽度:100 px,,
,,,边界:1 px solid # 000;,
,,,位置:,绝对的,,
,,,-webkit-user-select:,没有,,
,,,-ms-user-select:,没有,,
,,,-moz-user-select:, -moz-none;,
,,,光标:,指针,,
,,},
:({才能,
,,,左:200 px,,
,,},
时间/style> & lt;
& lt; p id=癮pp"祝辞,
& lt;才能p 类=叭?v-drag>拖拽one,
& lt;才能p 类=皌wo", v-drag>拖拽two,
时间/p> & lt;
& lt; style 类型=拔谋?css"比;
前几天,:({
,身高:100 px;
,宽度:100 px;
,边界:1 px solid # 000;
,位置:绝对;
,-webkit-user-select:没有;
,-ms-user-select:没有;
,-moz-user-select: -moz-none;
,光标:指针;
,}
,:({
,左:200 px;
,}
& lt;/style>
& lt; p id=癮pp"祝辞
,& lt; p 类=叭?v-drag>拖拽one
,& lt; p 类=皌wo", v-drag>拖拽two
& lt;/p>
[javascript], view plain copy 打印? Vue.directive(& # 39;拖# 39;,,{,
插入才能:函数(el) {,
,,,el.onmousedown=function (e) {,
,,,,,let l=e.clientX-el.offsetLeft;,
,,,,,let t=e.clientY-el.offsetTop;,
,,,,,(e) {document.onmousemove=函数,
,,,,,,,el.style.left=e.clientX-l + & # 39; px # 39;,,
,,,,,,,el.style.top=e.clientY-t + & # 39; px # 39;,,
,,,,,},,
,,,,,(){el.onmouseup=函数,
,,,,,,,document.onmousemove=零;,
,,,,,,,el.onmouseup=零;,
,,,,,},
,,,},
,,},
}),
Vue ({new
艾尔:& # 39;#应用# 39;,
});
小编给大家分享一下使用Vue.directive()的注意事项有哪些,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
<强>使用Vue.directive()的注意事项有哪些
官网实例:
https://cn.vuejs.org/v2/api/Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html
指令定义函数提供了几个钩子函数(可选):
绑定:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
插入:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于文档中)。
更新:被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下).
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
解开:只调用一次,指令与元素解绑时调用。
两个简单的演示
1,官网给出的演示,刷新页面输入自动获取焦点:
2,一个拖拽的演示:1)被拖拽的元素必须用位置定位,才能被拖动;
2)自定义指令完成后需要实例化Vue,挂载元素;
3)插入:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于文档中)。
看完了这篇文章,相信你对“使用Vue.directive()的注意事项有哪些”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
