一.介绍
Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二.创建初始化项目
这里不在详细说明，我们的分页演示只需要vue和vue-router就可以了，我们直接构建项目和设置配置。
main.js:
App.vue:
pageHome.vue:
- 内容：{{item.text}}
pageInfo.vue:
- 内容：{{item.text}}
pageNews.vue:
- 内容：{{item.text}}
预览效果：
三.分页静态结构和样式
divuePage.vue:
main.js注册：
pageHome.vue引用：
- 内容：{{item.text}}
效果预览：
四.分页组件实现逻辑分析
我们分析一下如何实现我们的分页组件：
从分页组件考虑：
分页组件需要显示页数，那么就需要传递给分页组件总用多少页这个状态，
上一页和下一页存在不可用状态，在第一页上一页不可用，所以要把当前所在页数传递，同样页数的焦点位置也需要它判断，
然后就是方法，我们页数和按钮的点击都是发起请求，携带的参数就是当前点击的页数，
1.总页数，当前所在页，可在父组件传递进入
2.发起请求的方法可以通过组件交互通信实现
1的数据都是接口会返回给我们的，我们直接以属性传递即可：
2的实现也很简单，我们其实已经处理模拟使用过了：
pageHome.vue:
- 内容：{{item.text}}
五.分页组件逻辑编写
divuePage.vue我们接受了这些传递的内容，总页数和当前所在页，然后点击第一页触发自定义事件，传递给父组件一个1，获取第一页数据：
1.页数显示
我们的首要工作就是把页数显示出来，我们已经接收了总页数，其实这个问题很容易解决，我们设置一个计算属性，属性依据总页数生成一个数组，从1到n即可：
显示：
这样还不够健壮，还有一个就是总页数5做分界线，大于5就显示当前到后4个，
比如在第3页，显示：3 4 5 6 7
第2页，显示：2 3 4 5 6
好了我们加入一些小的逻辑判断：
我们要给当前页加一个类名标识，已经获取当前的页数了，我们加一个判断就可以了，在v-for中：
我们在加入点击事件，拿到点击的item就是要请求后台数据的参数page:
定义这个方法：
完整代码：
效果测试：
2.第一页和最后一页处理
这个很简单，只是传递page参数，我们已经获取总页数，直接设置即可！
3.上一页和下一页处理
这个对比第一页需要加入特殊的处理，当前是第一页，这个按钮就不可用状态，下一页一样的逻辑判断当前是不是在最后一页：
调用位置加入事件，在加一个是否可用的类名：
全部代码：
效果测试：
4.跳页处理
这个我们获取输入框的值，直接调用，不过对输入的内容必须有一些判断限制：
加一个data:
使用位置：
5.显示总页数
这个是最简单的：
六.分页全部代码和测试
divuePage.vue:
我们现在在pageHome.vue做了使用，这个模拟数据包含7页，我们在另外两个组件也使用分页组件，测试小于5页和只有1页的效果：
直接粘贴就可以在另外的组件使用。
只有1页：
小于5页：
测试没有太大问题！
七.优化和改进建议
当然不是样式的优化，这个需要设计的参与，我们还是显示的优化和改进，比如：
我们是不是该有一个...
还有就是...
八.完整代码
main.js:
App.vue:
divuePage.vue:
