之前一直接触都是原始的前端模型，jquery+bootstrap，冗杂的dom操作，繁琐的更新绑定。接触vue后，对前端MVVM框架有了全新的认识。本文是基于webpack+vue构建，由于之前的工作主要是基于java的服务端开发工作，对前端框架和组件的理解，不够深入，借此来记录在前端框架使用和构建中的点点滴滴。
此分页组件参照于bootstrap-datatable底部分页开发完成，相关参数增加自定义功能。
最终使用展现效果图如下，数据来源于cnodejs【https://cnodejs.org/】
底部分页组件主要由左侧当前数据项数量显示和右侧分页页码两部分组成。组件代码如下：
<template xmlns:v-on="http://www.w3.org/1999/xhtml"
xmlns:v-bind="http://www.w3.org/1999/xhtml">
<div class="page-bar">
<div class="page-size">
<div>
<select v-on:change="menuChange()" v-model="limit">
<option v-for="item in menu" v-bind:value="item">{{item}}</option>
</select>
记录/页，显示第 {{start}} 至 {{end}} 项记录，共 {{totalSize}} 项
</div>
</div>
<div class="page-con">
<ul>
<li><a v-on:click="firstClick()" v-bind:class="{ 'disabled': cur == 1}">首页</a></li>
<li><a v-on:click="preClick()" v-bind:class="{ 'disabled': cur == 1}">上一页</a></li>
<li v-for="per in pages" v-bind:class="{ 'active': cur == per}">
<a v-on:click="pageClick(per)">{{ per }}</a>
</li>
<li><a v-on:click="nextClick()" v-bind:class="{ 'disabled': cur == totalPage}">下一页</a></li>
<li><a v-on:click="lastClick()" v-bind:class="{ 'disabled': cur == totalPage}">尾页</a></li>
<li><a>共<i>{{totalPage}}</i>页</a></li>
</ul>
</div>
<div class="clear-both"></div>
</div>
</template><script>
import Ajax from '../ajax'
export default{
props: ['page-model'],
data () {
return {
// 初始页
cur: 1,
// 请求地址
url: this.pageModel.url ? this.pageModel.url : "",
// 请求参数
param: this.pageModel.param ? this.pageModel.param : {},
// 请求方法 默认为GET请求
method: this.pageModel.method ? this.pageModel.method : 'GET',
// 每页显示数量 默认每页显示10条
limit: this.pageModel.menu ? this.pageModel.menu[0] : 10,
// 底部分页基数 默认5
perSize: this.pageModel.perSize ? this.pageModel.perSize : 5,
// 每页显示数量 下拉选项
menu: this.pageModel.menu ? this.pageModel.menu : [5, 10, 50],
