Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍。以下将详细介绍如何实现自定义指令v-lazyload。

  先看如何使用这个指令:

  

<img v-lazyload="imageSrc" >

  imageSrc是要加载的图片的实际路径。

  为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下:

  

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

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

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

inserted 和 updated为Vue指令的执行不同阶段提供的钩子函数,查看Vue的官网可以看到一共有5个阶段,

 

指令定义函数提供了几个钩子函数(可选):