vue 修改dom style_Vue实战066：自定义指令及使用

什么是Vue指令

Vue指令是一种附加到DOM元素上的特性，通常以"v-"作为前缀来告诉Vue这是一种特殊的标记， 当渲染到该DOM时就会执行指令特性，以实现对HTML元素的一些行为控制。Vue内置了很多指令，下面列出一些常用的指令：

除了默认核心指令Vue 也允许注册自定义指令，前面这篇文章Vue实战056：input框自动获取焦点中就用到了自定义指令的功能。在全局注册一个指令v-focus，然后在需要使用的DOM元素中绑定v-focus指令，当该指令的功能在页面被加载时元素获得焦点。

​如何自定义Vue指令

Vue提供了directive属性来实现自定义指令注册，directive 第一个参数是指令名(指令名在声明的时候不需要加 v-)，第二个参数是一个对象，对象内部提供了以下个钩子函数 (可选)：

同样在钩子函数也被赋予了许多的参数，通过获取一些参数来指定要操作的对象或事件(除了 `el` 参数之外，其它参数都应该是只读的，尽量不要修改他们)。

自定义拖拽指令

前面已经定义过focus指令了(需要了解的可以参考文章Vue实战056：input框自动获取焦点)，这里我们新定义个drag指令，实现DOM元素的拖拽功能。在main.js文件中添加如下定义，鼠标按下时记录鼠标位置以及元素位置并算出鼠标相对元素的位置，在拖拽时记下当前鼠标的位置从而计算出鼠标移动距离，最后将元素的当前位置赋值给属性el.style.left和el.style.top即可(如果是图片的话加入：e.preventDefault())：

自定义拖拽指令使用

调用自定义指令很简单，只要在模板中任何需要拖拽的元素上添加新的 v-drag属性即可。当然拖拽需要配合position属性来使用，在允许拖拽的区域设置属性position：relative，被拖拽元素设置属性position：absolute才能生效。

总结：

Vue指令可以非常方便快捷地操作DOM元素，当开发人员在某些场景下需要对普通DOM元素进行频繁操作的时候就可以考虑自定义一个指令，通过全局注册该指令可以提高代码的复用性，提升开发效率。

图来自“互联网”

以上内容是小编给大家分享的Vue实战066：自定义指令及使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考专栏：Vue实战系列，在此也非常感谢大家对小编的支持！