Vue.js自訂指令的用法與執行個體

標籤：新功能   需要   擴充   limit   custom   blog   拿來主義   第三方   基於   

　　市面上大多數關於Vue.js自訂指令的文章都在講文法，很少講實際的應用情境和用例，以致於即便明白了怎麼寫，也不知道怎麼用。本文不講文法，就講自訂指令的用法。

　　自訂指令是用來操作DOM的。儘管Vue推崇資料驅動視圖的理念，但並非所有情況都適合資料驅動。自訂指令就是一種有效補充和擴充，不僅可用於定義任何的DOM操作，並且是可複用的。

　　比如Google圖片的載入做得非常優雅，在圖片未完成載入前，用隨機的背景色佔位，圖片載入完成後才直接渲染出來。用自訂指令可以非常方便的實現這個功能。

效果：

　　自訂指令的第二用處是用於整合第三方外掛程式。我們知道任何軟體開發領域都可以分為四層：底層是原生的API，上層是通用架構，再上層是萬用群組件，最上層才是具體的業務代碼。一個通用架構，必須搭配一套完整的萬用群組件，才能真正奠定其江湖地位。

　　在前端開發領域，以前的通用架構是jQuery，jQuery以及基於jQuery構建的萬用群組件形成了一個龐大的生產系統。現在的通用架構是Angular、React和Vue，每個架構都需要基於自身構建新的組件庫。自訂指令好就好在：原先的那些萬用群組件，無論是純js的也好，基於jQuery的也好，都可以拿來主義直接吸收，而不需要改造或重構。

　　比如寫文檔通常會用到highlight.js，我們可以直接將其封裝為一個自訂指令，這樣highlight.js就變成了Vue的一個新功能。

效果：

　　但凡遇到第三方外掛程式如何與Vue.js整合的問題，都可以嘗試用自訂指令實現。

　　更多的用法請參考：

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

Vue.js自訂指令的用法與執行個體