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