vue之生命周期函数 新闻分页页码生成

上节课我们学习到booklist改变了之后 必须要点击按钮后才能将数据显示到页面上
那有没有办法让页面加载的时候就把数据显示到页面上呢？
这就需要用到生命周期函数了
vue实例在创建的过程中 经历了一系列的过程 数据监听 编译模板 挂载dom 监听dom变化 更新视图等等 这里面有一系列函数处理（生命周期函数）
只要在代码里面写上生命周期函数 在该阶段就会执行里面的代码
下面看下页面加载时就显示图书列表
更改代码如下
在created()生命周期函数中调用ajax请求操作（该生命周期表示vue实例初始化完成后进行的操作）

image.png

运行结果

image.png

可以看见运行就显示了图书列表
上节课是演示了生成5条数据 如果数据多了 生成50条 一页就放不下了
所以需要分页
下面我们演示下生成分页代码
首先mockjs生成50条图书数据

image.png

运行效果

image.png

图书分页代码

分页一般两种做法 一种是后端直接把所有数据一次性返回 前台根据总数分页（适合于数据量不是很大的情况）
另一种是在后端请求时只请求10条，后端返回的时候自动把一共多少条 和分多少页在后端直接搞定传给前端
下面看下代码

image.png

计算属性中计算了页码值
模板里面引用如下

image.png

运行效果

image.png

最后实现下点击某一页 某一页选中状态
可以通过一个当前页码来进行判断

image.png

image.png

绑定class属性

image.png

运行效果

image.png

默认第一页选中 点击某个某个选中
比如点击第二页

image.png

后面我们实现数据真正的分页效果 每页只显示10条数据