Vue.js實現無限載入與分頁功能開發 | vue分頁
本篇文章是一篇Vue.js的教程,目標在於用一種常見的業務場景——分頁/無限載入,幫助讀者更好的理解Vue.js中的一些設計思想。與許多TodoList類的入門教程相比,更全面的展示使用Vue.js完成一個需求的思考過程;與一些構建大型應用的高階教程相比,又更專注於一些零碎細節的實現,方便讀者快速掌握、致用。需求分析當一個頁面中資訊量過大時(例如一個新聞列表中有200條新聞需要展示),就會產生問題,例如:》資料量過大,影響載入速度》使用者體驗差,很難定位到之前自己看過的某篇文章》擴充套件性差,如果200條變為2000條或者更多所...
本篇文章是一篇Vue.js的教程,目標在於用一種常見的業務場景——分頁/無限載入,幫助讀者更好的理解Vue.js中的一些設計思想。與許多Todo List類的入門教程相比,更全面的展示使用Vue.js完成一個需求的思考過程;與一些構建大型應用的高階教程相比,又更專注於一些零碎細節的實現,方便讀者快速掌握、致用。
需求分析
當一個頁面中資訊量過大時(例如一個新聞列表中有200條新聞需要展示),就會產生問題,例如:
》資料量過大,影響載入速度
》使用者體驗差,很難定位到之前自己看過的某篇文章
》擴充套件性差,如果200條變為2000條或者更多
所以常見的解決思路就是至底時載入資料或者分頁展示。無限載入的實現過程類似於:
1.ajax類方法獲取資料
2.資料存入本地陣列
3.陣列中的每條資料對應插入一個HTML模板片段中
4.將HTML片段append到節點中
前端分頁的實現過程類似於:
1.ajax類方法獲取資料
2.資料替換本地陣列
3.陣列中的每條資料對應插入一個HTML模板片段中
4.清空節點後將HTML片段append到節點中
往往修改或者維護程式碼時,我們會發現渲染HTML和插入部分是比較煩人的。因為我們需要將HTML拼接成字串,在對應的位置插入資料,往往就是一段非常長的字串,之後想要加個class都費勁。es6的模板字串讓這個情況有所好轉,但是依然有瑕疵(例如實際編寫時無法HTML程式碼高亮)。同時我們還需要寫不少for或者forEach去迴圈陣列,再命令式的append,如果這段程式碼片段有一些複雜的互動,可能還需要通過事件代理繫結一堆方法。
如果在完成這類業務時,你也遇到過上述的問題,那麼你就會發現Vue真是太coooooool了,let’s vue!
新建一個Vue.js專案
強烈推薦使用vue-cli來新建一個專案。
一開始你可能會認為用node.js和npm安裝一大堆庫,生成了一些你不太瞭解的目錄和配置檔案,一寫程式碼還會跳出一堆eslint的提示。但是這絕對物有所值,因為這樣的一個模板可以幫你更好的理解V...