本篇文章是一篇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的提示。但是这绝对物有所值，因为这样的一个模板可以帮你更好的理解Vue.js组织文件的思路，并且当你适应之后，你会发现这些条条框框极大地加快了你的开发效率。
在这次的教程中，我们新建了一个名叫loadmore的项目，具体的新建项目流程可以参照官网教程的安装一节。
布局页面结构
为了配合教程的逐步深入，我先从完成 加载更多 功能入手。为了和之后的分页保持一致，我的页面准备由两部分组成，一是信息列表，二是底部的一个加载更多的按钮，我将他们都放在App.vue这个根组件中。
<template>
<div id="app">
<list></list>
<a class="button" @click="next" >GO NEXT</a>
</div>
</template>
<script>
import List from './components/List'
export default {
components: {
List
},
data () {
return {
...
}
},
methods: {
next () {
...
}
}
}
</script>
<style scoped>
.button {
display: block;
width: 100%;
background: #212121;
color: #fff;
font-weight: bold;
text-align: center;
padding: 1em;
cursor: pointer;
text-decoration: none;
}
.button span {
margin-left: 2em;
font-size: .5rem;
color: #d6d6d6;
}
</style>
</div>
在这个过程中，我们根据Vue的设计思想有了如下思路：
1.在信息列表中，我们会完成我们上文中提到的几个步骤，而这些步骤都只和信息列表本身有关，与Next按钮间唯一的联系就是Next点击后需要触发信息列表去获取，而这可以通过props传递。所以我们把列表及其自身业务逻辑、样式都放在List.vue这个组件中。
2.我们为按钮定义了一些基本的样式，但是我们用的css选择器就是一个.button类名，可能会和别的组件中的.button样式冲突，所以我们加入了一个scoped属性，让App.vue中的style样式只作用于这个组件内部。
注意：scoped并不会影响css的作用优先级，使用scoped不代表不会被外部样式表覆盖。
3.我们想引入一些基础样式，比如reset.css。如果在项目中使用了sass之类的语言，那么可以将对应的外部sass文件放在assets文件夹中，通过import引入。普通的css可以直接写在一个不加scoped属性的组件中，但是如果你确定这个样式表不会被频繁改动，那么也可以作为第三方静态资源引入index.html中。例如这个例子中，我在index.html中加入了：
<link rel="stylesheet" href="./static/reset.css">
效果：
完成List.vue
目前我们主要的业务逻辑都是围绕信息列表展开的，也就是我们创建的List.vue。首先，我们需要获取目标数据，我选用了cnodejs.org社区的API作为例子进行编写。如果你也想用一个封装好的ajax库的话，应该这么做：
引入第三方JS库
将目标JS库文件放在static文件夹中，例如我选择的是reqwest.js，然后在index.html先引入。
<script src="./static/reqwest.min.js"></script>
然后在build配置文件夹中，修改webpack.base.conf.js，export externals属性：
externals: {
'reqwest': 'reqwest'
}
</div>
这样我们在我们的项目中，就可以随时加载第三方库了。
import reqwest from 'reqwest'
写个API接口
在这个例子中，我们只需要调用文章列表这一个接口，但是实际项目中，可能你需要调用很多接口，而这些接口又会在多个组件中被用到。那么调用接口的逻辑四散在各个组件中肯定是不好的，想象一下对方的url发生了变化，你就得在无数个组件中一个个检查是否要修改。
所以我在src文件夹中新建了一个api文件夹，用于存放各类API接口。当前例子中，要获取的是新闻列表，所以新建一个news.js文件：
import reqwest from 'reqwest'
const domain = 'https://cnodejs.org/api/v1/topics'
export default {
getList (data, callback) {
reqwest({
url: domain,
data: data
})
.then(val => callback(null, val))
.catch(e => callback(e))
}
}
</div>
这样我们就拥有了一个获取新闻列表的API：getList。
编写组件
我们用一个<ol>作为新闻列表，内部的每一个<li>就是一条新闻，其中包括标题、时间和作者3个信息。
在data中，我们用一个名为list的数组来储存新闻列表的数据，一开始当然是空的。我们再在data中设置一个名为limit的值，用来控制每页加载多少条数据，作为参数传给getList这个API。
因此我们的template部分是这样的（加入了一些style美化样式）：
<template>
<ol>
<li v-for="news of list">
<p class="title">{{ news.title }}</p>
<p class="date">{{ news.create_at }}</p>
<p class="author">By: {{ news.author.loginname }}</p>
</li>
</ol>
</template>
<style scoped>
ol {
margin-left: 2rem;
list-style: outside decimal;
}
li {
line-height: 1.5;
padding: 1rem;
border-bottom: 1px solid #b6b6b6;
}
.title {
font-weight: bold;
font-size: 1.3rem;
}
.date {
font-size: .8rem;
color: #d6d6d6;
}
</style>
</div>
之后我们显然需要使用getList来获取数据，不过先想想我们会在哪几个地方使用呢？首先，我们需要在组件开始渲染时自动获取一次列表，填充基础内容。其次，我们在每次点击APP.vue中的Next按钮时也需要获取新的列表。
所以我们在methods中定义一个get方法，成功获取到数据后，就把获取的数组拼接到当前list数组后，从而实现了加载更多。
沿着这个思路，再想想get方法需要的参数，一个是包含了page和limit两个属性的对象，另一个是回调函数。回调函数我们已经说过，只需要拼接数组即可，因此只剩下最后一个page参数还没设置。
在初始化的时候，page的值应该为1，默认是第一页内容。之后page的值只由Next按钮改变，所以我们让page通过props获取App.vue中传来的page值。
最后则是补充get方法触发的条件。一是在组件的生命周期函数created中调用this.get()获取初始内容，另一是在page值变化时对应获取，所以我们watch了page属性，当其变化时，调用this.get()。
最后List.vu