这篇文章主要介绍了vue-lazyload如何用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue-lazyload如何用文章都会有所收获，下面我们一起来看看吧。
创新互联建站成立于2013年，我们提供高端成都网站建设、成都网站制作、成都网站设计、网站定制、成都营销网站建设、微信平台小程序开发、微信公众号开发、网站推广服务，提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地，为卫生间隔断企业提供源源不断的流量和订单咨询。
v-lazy
这个是Vue-Lazyload最常用的一个东西，用法也非常的简单：
我们现在来看看它的内部是如何实现的，首先我们进入它github上的源码可以发现它的定义：
Vue.directive('lazy', {
bind: lazy.add.bind(lazy),
update: lazy.update.bind(lazy),
componentUpdated: lazy.lazyLoadHandler.bind(lazy),
unbind: lazy.remove.bind(lazy)
})
Vue.directive('lazy-container', {
bind: lazyContainer.bind.bind(lazyContainer),
update: lazyContainer.update.bind(lazyContainer),
unbind: lazyContainer.unbind.bind(lazyContainer)
})我们可以发现它是利用vue的自定义指令实现的，vue的自定义指令可以自定义v-***之类的指令，例如你定义了Vue.directive('demo',..)那么你就可以使用v-demo这样的指令，当你使用了之后就会有对应事件供你回调，例如bind,insert,unbind等，具体可以看看下面的demo：
=> vue自定义指令(二维码)
进入demo后我们可以看到一进去就出发了bind和insert事件，然后你在输入框输入内容就会触发update和updateComponent事件，当你点击隐藏就会触发unbind事件，当你点击显示则又会触发bind和insert事件。(具体含义可以去查阅官方文档)
vue的自定义指令还可以带参数，例如vue-lazy:background-image.container='src'这样的结构，我们可以通过事件里面的binding参数获取到，例如上面的background-image可以通过binding.arg获取，.container可以通过binding.modifiers获取。
好了，讲了这么多，v-lazy的实现思路应该比较清楚了，就是内部实现了一个lazy的类，通过vue自定义指令将对象和参数传进去，然后通过检测事件(scroll等)检测位置，如果一旦这个对象出现在屏幕里就加载图片。下面看看已经实现好的demo:(包含img的v-lazy和div的v-lazy:background-image两种情况)
=> v-lazy demo(二维码)
注意：这里的v-lazy='src'中的src一定要使用data里面的变量，不能写真实的图片路径，这样会报错导致没有效果，因为vue的自定义指令必须对应data中的变量或者是数字，你写一个图片路径识别不了，我之前就是被坑了。（这里的图片fadeIn效果是在load事件之后添加了一个fadeIn的class）。
v-lazy-container
这个总体上和v-lazy差不多，也是通过自定义指令去定义的，不过v-lazy-container扫描的是内部的子元素，v-lazy-container一般使用如下:
