Vue.js自定义指令的用法与实例

　　市面上大多数关于Vue.js自定义指令的文章都在讲语法，不多讲实际的应用场景和用例，以至于即使明白了怎么写，也不知道怎么用。本文不讲语法，就讲自定义指令的用法。

　　自定义指令是用来操做DOM的。尽管Vue推崇数据驱动视图的理念，但并不是全部状况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不只可用于定义任何的DOM操做，而且是可复用的。

　　好比谷歌图片的加载作得很是优雅，在图片未完成加载前，用随机的背景色占位，图片加载完成后才直接渲染出来。用自定义指令能够很是方便的实现这个功能。

效果：

　　自定义指令的第二用处是用于集成第三方插件。咱们知道任何软件开发领域均可以分为四层：底层是原生的API，上层是通用框架，再上层是通用组件，最上层才是具体的业务代码。一个通用框架，必须搭配一套完整的通用组件，才能真正奠基其江湖地位。

　　在前端开发领域，之前的通用框架是jQuery，jQuery以及基于jQuery构建的通用组件造成了一个庞大的生产系统。如今的通用框架是Angular、React和Vue，每一个框架都须要基于自身构建新的组件库。自定义指令好就好在：原先的那些通用组件，不管是纯js的也好，基于jQuery的也好，均可以拿来主义直接吸取，而不须要改造或重构。

　　好比写文档一般会用到highlight.js，咱们能够直接将其封装为一个自定义指令，这样highlight.js就变成了Vue的一个新功能。

效果：

　　但凡遇到第三方插件如何与Vue.js集成的问题，均可以尝试用自定义指令实现。

 

      练习题：如今要用自定义指令实现一个常见的 tip 提示弹框的功能，鼠标移入元素，能够在元素的上下左右显示 tip，鼠标移出则隐藏 tip。

     读者可本身尝试。用起来确实很是方便。vuetifyjs里有相关的实现，请参考：

      https://vuetifyjs.com/directives/tooltips

     

     更多的用法请参考：

　　http://codepen.io/search/pens?q=custom%20directive&limit=all&order=popularity&depth=everything&show_forks=false