vue插件小计

vue今天做的项目有些知识点还是有必要整理一下，并要掌握的。

图片懒加载 vue-lazyload

首先先看一下原理

其实这个没必要一下看懂，留着以后慢慢看。但是下边的原理简述大家估计可以看得明白些

原理简述

1.vue-lazyload是靠指令来实现懒加载的，通过在Html里加入v-lazy指令：

<div v-lazy = '图片路径'><div>

2.指令被bind时会创建一个listener，并将其添加到listener queue里面， 并且搜索target dom节点，为其注册dom事件(如scroll事件)

3.上面的dom事件回调中，会遍历 listener queue里的listener，判断此listener绑定的dom是否处于页面中perload的位置，如果处于则加载异步加载当前图片的资源

4.同时listener会在当前图片加载的过程的loading，loaded，error三种状态触发当前dom渲染的函数，分别渲染三种状态下dom的内容

属性key和它的值

如图所示，都是它的一些属性，通过不同的属性来实现它的变化，当然这里属性是可以选填的

这里加上一个try的知识点。try：数量 // 表示加载的个数

用法

首先下载 npm i -S vue-lazyload

引入vue-lazyload

import VueLazyload from 'vue-lazyload'

Vue.use(VueLoazyload, {

属性：值
})

无限滚动插件 vue-infinite-scroll

基本知识点

当然这个是在html标签里直接使用

应用

import VueInfiniteScroll from 'vue-infinite-scroll'

Vue.use (VueInfiniteScroll)

在html中

<div  v-infinite-scroll="loadMore"
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="20"></div>