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>