学习了vue.js一段时间，拿它来做2个小组件，练习一下。
我这边是用webpack进行打包，也算熟悉一下它的运用。
源码放在文末的 github 地址上。
首先是index.html
Page 文章内容...
立即学习“前端免费学习笔记（深入）”；
我将 app这个组件放在
内通过webpack打包后,入口的js文件是entry.js，用来引入app.vue组件
entry.js
let Vue = require('vue');
import App from './components/app';
let app_vue = new Vue({
el: '#main',
components: {
app: App
}
});
立即学习“前端免费学习笔记（深入）”；
接下来看下这个app组件
立即学习“前端免费学习笔记（深入）”；
它有2个子组件，分别是comment.vue和page.vue，通过动态绑定数据，进行父子间组件通信，我是这样认为的，对于 当前在第几页 应当由 page.vue传递给app.vue，所以这里我们使用 双向绑定,其余的如 params, url, isSync，即向后台请求数据的东西以及是否同步或异步操作。
接下来,看下comment.vue评论组件
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
{{ totalCommentCount }} 条评论
{{ comment.name }}
{{ comment.context }}
立即学习“前端免费学习笔记（深入）”；
这里的 getData.js 将在下面提到，是我们获取数据的位置。
loading: 本意是在跳转页码加载评论时，对于当前评论加载0.5的透明度的遮罩，然后ajax通过它的回调函数来取消遮罩，现在这样就不能实现了，只能强行写下，然而是没有用的..
hasComment: comment组件第一次加载的时候，我们就去请求获得总共的数据长度，如果没有数据，则不显示comment组件布局内容
·curPageIndex·: 通过父组件app传递下来，使用的是props
这些数据，我们都设置一个默认值与类型比较好。
page.vue
立即学习“前端免费学习笔记（深入）”；
主要是个对于 组件事件的运用，=最常见的click事件，以及class与style的绑定，根据 curPageIndex与this.pageIndex来比较，判断是否拥有这个class,通过computed计算属性，来获得 页码数组 因为会根据当前页 有所变化，created的时候 计算出总页码。
最后一个是 目前生成获取静态数据的js文件.
// let data = {
// avatar: '', 头像
// name: '', 用户名
// context: '', 评论内容
// }
let dataArr = [];
function randomStr (len) {
return Math.random().toString(36).substr(len);
}
function initData () {
for (var i = 0; i<45 ; ++i) {
let _avator = "./resources/" + i%7 + ".jpg";
let _name = randomStr(20);
let _context = randomStr(2);
dataArr.push({
avatar: _avator,
name: _name,
context: _context
});
}
}
if (!dataArr.length) {
initData();
}
export function getCommentData (url = '', params = null, isSync = true, curPageIndex = 1, eachPageSize = 7) {
/* ajax */
let st = (curPageIndex - 1) * eachPageSize;
let end = st + eachPageSize;
return dataArr.slice(st, end);
}
export function getTotalCommentCount(url = '', params = null, isSync = true) {
/* ajax */
return dataArr.length;
}
export function getTotalPageCount(url = '', params = null, isSync = true, eachPageSize = 7) {
/* ajax */
return Math.floor((dataArr.length + eachPageSize -1 ) / eachPageSize);
}
立即学习“前端免费学习笔记（深入）”；
就这样了吧。
更多使用vue.js制作分页组件相关文章请关注PHP中文网！
