Vue.js自定義指令的用法與例項

林堯彬發表於2020-04-04

  市面上大多數關於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

轉載於:https://www.cnblogs.com/kidney/p/6296304.html

相關文章