Vue是可以自定義指令的,最近學習過程中遇見了一個需要圖片懶加載的功能,最后參考了別人的代碼和思路自己重新寫了一遍。以下將詳細介紹如何實現自定義指令v-lazyload。

  先看如何使用這個指令:

  

<img v-lazyload="imageSrc" >

  imageSrc是要加載的圖片的實際路徑。

  為了實現這個指令,我們首先單獨建立一個文件,名字為lazyload.js.并填寫基本的代碼,如下:

  

平面設計培訓,網頁設計培訓,美工培訓,游戲開發(fā),動畫培訓

export  (Vue , options = {})=> init =: 'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png'  //例如:<img v-lazyload="imageSrc" > ele是img binding是imageSrc
'lazyload'

平面設計培訓,網頁設計培訓,美工培訓,游戲開發(fā),動畫培訓

inserted 和 updated為Vue指令的執(zhí)行不同階段提供的鉤子函數,查看Vue的官網可以看到一共有5個階段,

 

指令定義函數提供了幾個鉤子函數(可選):

  • 網友評論