学习了vue.js一段时间，拿它来做2个小组件，练习一下。
我这边是用webpack进行打包，也算熟悉一下它的运用。
源码放在文末的 github 地址上。
首先是index.html
<!doctype html>
<html>
<head>
<title>page</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'open sans', arial, sans-serif;
}
.contianer {
width: 50%;
height: auto;
margin: 20px auto;
}
article {
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class='contianer'>
<article>
文章内容...
</article>
<div id='main'>
<app></app>
</div>
</div>
<script type="text/javascript" src='bundle.js'></script>
</body>
</html>
我将 app这个组件放在 <div id='main'></div> 内
通过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组件
<style type="text/css" scoped>
</style>
<template>
<comment :cur-page-index="curpageindex" :each-page-size="eachpagesize" :comment-url="commenturl"
:comment-params="commentparams" :comment-is-sync="commentissync">
</comment>
<page :cur-page-index.sync="curpageindex" :each-page-size="eachpagesize" :page-url="pageurl"
:page-params="pageparams" :page-is-sync="pageissync">
</page>
</template>
<script type="text/javascript">
import comment from './comment';
import page from './page';
export default {
data () {
return {
curpageindex: 1,
eachpagesize: 7,
}
},
components: {
comment: comment,
page: page
},
}
</script>
它有2个子组件，分别是comment.vue和page.vue，通过动态绑定数据，进行父子间组件通信，我是这样认为的，对于 当前在第几页 应当由 page.vue传递给app.vue，所以这里我们使用 双向绑定,其余的如 params, url, issync，即向后台请求数据的东西以及是否同步或异步操作<当然，这里我还没有测试过后台数据，目前是直接js生成静态数据>。
接下来,看下comment.vue评论组件
<style type="text/css" scoped>
.comt-mask {
opacity: 0.5;
}
.comt-title {
}
.comt-line {
width: 100%;
height: 2px;
background-color: #ccc;
margin: 10px 0;
}
.comt-wrap {
}
.comt-user {
float: left;
}
.comt-img {
width: 34px;
height: 34px;
border-radius: 17px;
}
.comt-context {
margin: 0 0 0 60px;
}
.comt-name {
color: #2b879e;
margin-bottom: 10px;
font-size: 18px;
}
</style>
<template>
<div v-if="hascomment" :class="{'comt-mask': loading}">
<h3 class='comt-title'>{{ totalcommentcount }} 条评论</h3>
<div class="comt-line"></div>
<div class="comt-wrap" v-for="comment of commentarr">
<div class="comt-user">
<img src='{{ comment.avatar }}' class="comt-img"/>
</div>
<div class="comt-context">
<p class="comt-name">{{ comment.name }}</p>
<p>
{{ comment.context }}
</p>
</div>
<div class="comt-line"></div>
</div>
</div>
</template>
<script type="text/javascript">
import {getcommentdata, gettotalcommentcount} from './getdata';
export default {
props: {
curpageindex: {
type: number,
default: 1,
},
eachpagesize: {
type: number,
default: 7,
},
commenturl: {
type: string,
default: '',
},
commentparams: {
type: object,
default: null,
},
commentissync: {
type: boolean,
default: true,
},
},
data () {
return {
totalcommentcount: 0,
hascomment: false,
loading: true,
}
},
computed: {
commentarr () {
this.loading = true;
let res = getcommentdata(this.commenturl, this.commentparams, this.commentissync, this.curpageindex, this.eachpagesize);
this.loading = false;
return res;
},
},
created () {
let cnt = gettotalcommentcount(this.commenturl, this.commentparams);
this.totalcommentcount = cnt;
this.hascomment = cnt > 0;
}
}
</script>
这里的 getdata.js 将在下面提到，是我们获取数据的位置。
loading: 本意是在跳转页码加载评论时，对于当前评论加载0.5的透明度的遮罩，然后ajax通过它的回调函数来取消遮罩，现在这样就不能实现了，只能强行写下，然而是没有用的..
hascomment: comment组件第一次加载的时候，我们就去请求获得总共的数据长度，如果没有数据，则不显示comment组件布局内容
·curpageindex·: 通过父组件app传递下来，使用的是props
这些数据，我们都设置一个默认值与类型比较好。
page.vue
<style type="text/css" scoped>
.page {
text-align: center;
margin: 30px;
}
.page-btn {
color: gray;
background-color: white;
border: white;
width: 30px;
height: 30px;
margin: 5px;
font-size: 18px;
outline: none;
}
.page-btn-link {
cursor: crosshair;
}
.page-btn-active {
border: 1px solid gray;
border-radius: 15px;
}
</style>
<template>
<div class="page">
<button v-for="pageindex of pagearr" track-by='$index' :class="{'page-btn': true, 'page-btn-active':
this.curpageindex === pageindex, 'page-btn-link': checknum(pageindex)}"
@click="clickpage(pageindex)" >
{{ pageindex }}
</button>
</div>
</template>
<script type="text/javascript">
import {gettotalpagecount} from './getdata';
export default {
props: {
totalpagecount: {
type: number,
default: 0,
},
curpageindex: {
type: number,
default: 1,
},
eachpagesize: {
type: number,
default: 7,
},
pageajcn: {
type: number,
default: 4,
},
pageurl: {
type: string,
default: '',
},
pageparams: {
type: object,
default: null,
},
pageissync: {
type: boolean,
default: true,
}
},
data () {
return {
}
},
computed: {
pagearr () {
let st = 1,
end = this.totalpagecount,
cur = this.curpageindex,
ajcn = this.pageajcn,
arr = [],
left = math.floor(ajcn / 2),
right = ajcn - left;
if (end == 0 || cur == 0) {
return arr;
} else {
console.log(st, end, cur, left, right);
arr.push(st);
console.log(st+1, cur-left);
if (st + 1 < cur - left) {
arr.push('...');
}
for (let i = math.max(cur - left, st + 1); i <= cur - 1; ++i) {
arr.push(i);
}
if (cur != st) {
arr.push(cur);
}
for (let i = cur + 1; i <= cur + right && i <= end - 1 ; ++i) {
arr.push(i);
}
if (cur + right < end - 1) {
arr.push('...');
}
if (end != cur) {
arr.push(end);
}
return arr;
}
}
},
methods: {
clickpage (curindex) {
if (number.isinteger(curindex)) {
this.curpageindex = curindex;
}
},
checknum (curindex) {
return number.isinteger(curindex);
}
}，
created () {
this.totalpagecount = gettotalpagecount(this.pageurl, this.pageparams, this.pageissync,
this.eachpagesiz);
}
}
</script>
主要是个对于 组件事件的运用，=最常见的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制作分页组件。