分页组件
首先来创建项目：
分页组件，做项目不要写动手写代码，要想想业务逻辑，怎么写，如何写才是最好的呈现方式，做项目不急，要先想好整体的框架，从底层一开始最想要的是什么做起。
先动代码，边做边想是会出问题的，而且还会卡壳，让你半路出家的。
分页组件，你觉得要什么内容，是页面？如果不懂可以去看看别人的分页是怎么做的，考虑业务逻辑，整体出发去思考问题。要不然我去百度看看，别人的分页效果。
看了后做不出来也是没有关系的，我们呢？
可以从底部出发，从最小的逻辑开始，从做这个需要考虑到什么想起，一步一步来，做好局部的功能，这个功能做好了，才去做另一个功能或者页面哦~
分页组件我们需要的字段有哪些？
你想想，当前页，是不是有，curpage当前页，每页的大小，pagesize，总的页数，total，等等，考虑不到的，没关系看看别人的有什么，想好后才写代码，那才快。
不说无用，先创建项目：
写的分页组件
props: ['total'],
data: function() {
return {
page: 1, // 当前页码
pagesize: 10 // 每一页的记录数
});
},是不是只能想到那么多呢？那就先写那么多，然后再想想需要什么：
总页码 = Math.ceil(总记录数/每一页记录数）
总页码数，7页，或6页，当前是向上取整，每一页记录数10页，总记录数，总的多少页。如80除10页，8页。
math.ceil(x)返回大于等于参数x的最小整数,即对浮点数向上取整.
单击事件，切换不同的页面的效果。
<div id="app">
<h1>分页组件</h1>
//父
<page-component :total="total"></page-component>
</div><template id="page-component">
<ul class="pagination">
<li :class="p == page ? 'page-item active' : 'page-item'"
v-for="p in pagecount">
<a href="#" rel="external nofollow" class="page-link" @click.prevent="page=p">
{{p}}
</a>
</li>
</ul>
</template>
@click.stop 阻止事件冒泡
@click.prevent 阻止事件的默认行为，
<script src="vue.js"> </script>
<script>
// 定义组件
const PageComponent = {
name: 'PageComponent',
template: '#page-component',
props: ['total'],
