需求分析
当一个页面中信息量过大时（例如一个新闻列表中有200条新闻需要展示），就会产生问题，例如：
数据量过大，影响加载速度
用户体验差，很难定位到之前自己看过的某篇文章
扩展性差，如果200条变为2000条或者更多
所以常见的解决思路就是至底时加载数据或者分页展示。无限加载的实现过程类似于：
ajax类方法获取数据
数据存入本地数组
数组中的每条数据对应插入一个HTML模板片段中
将HTML片段append到节点中
前端分页的实现过程类似于：
ajax类方法获取数据
数据替换本地数组
数组中的每条数据对应插入一个HTML模板片段中
清空节点后将HTML片段append到节点中
往往修改或者维护代码时，我们会发现渲染HTML和插入部分是比较烦人的。因为我们需要将HTML拼接成字符串，在对应的位置插入数据，往往就是一段非常长的字符串，之后想要加个class都费劲。es6的模板字符串让这个情况有所好转，但是依然有瑕疵（例如实际编写时无法HTML代码高亮）。同时我们还需要写不少for或者forEach去循环数组，再命令式的append，如果这段代码片段有一些复杂的交互，可能还需要通过事件代理绑定一堆方法。
如果在完成这类业务时，你也遇到过上述的问题，那么你就会发现Vue真是太coooooool了，let's vue!
新建一个Vue.js项目
强烈推荐使用vue-cli来新建一个项目。
一开始你可能会认为用node.js和npm安装一大堆库，生成了一些你不太了解的目录和配置文件，一写代码还会跳出一堆eslint的提示。但是这绝对物有所值，因为这样的一个模板可以帮你更好的理解Vue.js组织文件的思路，并且当你适应之后，你会发现这些条条框框极大地加快了你的开发效率。
在这次的教程中，我们新建了一个名叫loadmore的项目，具体的新建项目流程可以参照官网教程的安装一节。
布局页面结构
为了配合教程的逐步深入，我先从完成 加载更多 功能入手。为了和之后的分页保持一致，我的页面准备由两部分组成，一是信息列表，二是底部的一个加载更多的按钮，我将他们都放在App.vue这个根组件中。
GO NEXT
查看更多关于Vue.js开发实践：实现精巧的无限加载与分页功能_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did115003