最近学Vue.js时碰到了个叫Vue.directive()的新鲜事。刚看到官方文档的时候挺晕的，看不太懂。但通过找实例和教程来看，逐渐搞明白点。所以，我决定给大家分享下自己对这玩意儿的理解和用后感，希望能帮到正在摸索中的小伙伴们。
了解Vue.directive()的基本概念
你知道吗，Vue中有个神奇的法宝叫Vue.directive(),就是那个让咱可以自己设置指令的家伙。啥玩意儿？这就要说说那些带v-前缀的属性喽，就是那些能在DOM底层进行操作的神秘命令！这事儿挺关键的，因为学会用这个功能就能随心所欲地控制DOM~
用Vue.directive这个方法，你可以随便注册个全局或者本地指令。全局指令哪儿都能用，本地指令就只能在它定义的地方用了。这样的方便，让Vue.directive成为了处理那些复杂DOM交互问题的得力助手
深入理解指令钩子函数
了解vue的directive()给我们提供哪些提醒，这可是我们用它写指令时的小技巧。有bind、inserted、update、componentUpdated和unbind5个功能，它们分别在什么时候派上用场？这就是关键。
比如说，你要是用bind钩子的话就是在第一次把命令跟元素绑起来的时候才会被叫醒；如果是用update钩子，那不管你绑定的数值有没有变，只要那个包含着这个元素的模板更新了，它就会被唤起。这样一来，就能随时随地对数据变动做出反应了。
实战案例分析
理论和实践都挺重要，只学理论可不行！我这就给你说说自己实战时遇到的两个小问题，一个是在官网看到的焦点自动获取，另一个是我自己琢磨出来的简单拖拽功能。
在学习怎么让input自动吸引焦点时，我掌握了用bind钩子设定focus状态的技巧。当尝试做拖动功能时，又遇到了position定位的难题，以及我竟不知道该怎样在inserted钩子里应对元素的拖动行为。
使用Vue.directive()的注意事项
Vue.directive()这东西用起来有点麻烦，你得留心几点。比如它有啥影响范围，钩子函数又是咋触发滴，还有怎么搞定它的生命周期。
很多人以为指令就能随便操控DOM，其实这是错觉！尽量让指令简单明了，别带太多复杂的逻辑。记得要深入理解并会用钩子函数，这可是防错的必杀技！
// 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el,binding) { // 聚焦元素 el.focus(); } }); new Vue({ el:'#app' }); // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el,binding) { // 聚焦元素 el.focus(); } }); new Vue({ el:'#app' });
编写自定义指令的一些技巧
我分享几个自定义指令编写里的小窍门。像如何提升指令速度，怎么解决指令跟组件的配合，还有就是测试和修正自定义指令的办法。
这些小技巧不能保证成功，但是用好了能帮你写出更耐操和效率高的代码。比方说，善用钩子函数能避免冗余的DOM操作，提升程序响应速度。
问题与解决
学得过程里，也有不少麻烦事儿。比喻说，怎么处理指令间的打架，怎么保证指令能一起玩儿等等。对付这些难题，我就是查文档啊、看看别人咋弄的，慢慢就明白了。
每个问题都能提升技能喔！解答问题让我更明白Vue.directive()是啥了，用它来解决问题也更加自信。
总结与展望
.one,.two{
height:100px;
width:100px;
border:1px solid #000;
position: absolute;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: -moz-none;
cursor: pointer;
}
.two{
left:200px;
}
拖拽one
拖拽two
.one,.two{
height:100px;
width:100px;
border:1px solid #000;
position: absolute;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: -moz-none;
cursor: pointer;
}
.two{
left:200px;
}
拖拽one
拖拽two
[javascript] view plain copy print?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()的有点数了。说真的，一路走来挺辛苦的，付出的努力也得到了不错的回报。我觉得以后再往下钻研Vue的话，我还能用这个函数把我的项目搞得更棒。
真心希望这些分享对你们学Vue有所帮助~要是遇到啥问题或者想聊聊感受，就直接在评论区留言咱们一块儿学习进步，努力营造一个更棒的开发环境！
评论0