大多数web应用程序背后的思想都是从数据库中获取数据，并以最好的方式将数据呈现给用户 。当我们处理数据时，有时最好的呈现方法就是创建一个列表 。
根据数据量及其内容，我们可以决定一次显示所有内容(很少)，或者只显示一个更大数据集的特定部分(更有可能) 。只显示部分现有数据的主要原因是，我们希望尽可能保持应用程序的性能，并避免加载或显示不必要的数据 。
如果我们决定以“chunks(块)”的形式显示数据，那么我们需要一种方法来导航该数据集合 。对一组数据进行导航的最常见的两种方法是:
第一个是分页，这是一种将数据集分割为特定数量的页面的技术，它可以避免用户被一个页面上的数据量淹没，并允许用户一次查看一组结果 。以你正在阅读的这个博客为例 。主页列出了最新的10篇文章 。查看下一组最新的帖子需要单击一个按钮 。
第二种常见的技术是无限滚动，如果你曾经在Facebook或Twitter上浏览过时间轴，那你可能对无限滚动很熟悉 。
苹果新闻app也使用了无限滚动技术来浏览文章列表 。
在本文中，我们将更深入地研究第一种类型 。分页是我们几乎每天都会遇到的事情，但它并不是不重要的 。这是一个很好的组件应用实例，所以这也正是我们要做的 。我们将按步骤创建一个负责显示该列表的组件，并在单击要显示的特定页面时触发获取其他文章的操作 。换句话说，我们正在用Vue.js创建一个分页组件，就像下面这样:
我们一起来看一看这些步骤 。
#步骤1:使用Vue创建ArticlesList组件
我们从创建一个组件开始，该组件将显示文章列表(但目前还没有进行分页) 。我们称之为ArticlesList 。在该组件模板中，我们将遍历文章的集合，并将单个文章项目传递给每一个ArticleItem组件 。
【js前端分页完整代码 js分页插件的使用】在该组件的脚本部分，我们将设置初始数据:
articles: 这是一个空数组，填充了从mounted钩子上的API获取的数据 。currentPage: 用于操作分页 。pageCount : 这是在基于API响应的mounted钩子上计算的页面总数 。visibleItemsPerPageCount: 这是我们希望在一个页面上看到的文章数量 。在这个阶段，我们只获取文章列表的第一页 。这将给我们列出两篇文章:
#步骤2: 创建 pageChangeHandle 方法
现在，我们需要创建一个方法来加载下一页、上一页或选定的页面 。
在pageChangeHandle方法中，在加载新文章之前，我们根据传递给方法的一个属性来更改currentPage值，并从API获取对应于特定页面的数据 。接收到新数据后，我们将用包含新文章页面的新数据替换现有的articles数组 。
#步骤3:创建一个组件来触发页面更改
推荐阅读
- 怎么煮饺子不粘锅不破皮 学会这几个技巧煮出的饺子个个完整
- 月上星河眉间山海与君遥相会是什么歌 月上星河眉间山海与君遥相会完整歌词
- 周杰伦简单爱歌词 简单爱完整歌词
- 讲解mysql数据库建表的完整步骤 mysql数据库基础知识
- 图图小淘气歌词 图图小淘气完整歌词
- 求水刖的神医小懒妃和休夫别样妃完整，
- 完整鸡怎么做既简单又好吃 全鸡简单又好吃的做法
- 薇娅李佳琦直播预告，618促销完整版！
- 二零三歌词 二零三完整歌词
- 捕蝇纸高清完整版下载