学习了vue.js一段时间，拿它来做2个小组件，练习一下。 我这边是用webpack进行打包，也算熟悉一下它的运用。 源码放在文末的 github 地址上。
首先是index.html
<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
},}
它有2个子组件，分别是comment.vue和page.vue，通过动态绑定数据，进行父子间组件通信，我是这样认为的，对于 当前在第几页 应当由 page.vue传递给app.vue，所以这里我们使用 双向绑定,其余的如 params,url,isSync，即向后台请求数据的东西以及是否同步或异步操作<当然，这里我还没有测试过后台数据，目前是直接js生成静态数据>。
接下来,看下comment.vue评论组件
}
.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;
}
{{ comment.context }}
<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;
}
}
这里的 getData.js 将在下面提到，是我们获取数据的位置。 loading: 本意是在跳转页码加载评论时，对于当前评论加载0.5的透明度的遮罩，然后ajax通过它的回调函数来取消遮罩，现在这样就不能实现了，只能强行写下，然而是没有用的.. hasComment: comment组件第一次加载的时候，我们就去请求获得总共的数据长度，如果没有数据，则不显示comment组件布局内容 ·curPageIndex·: 通过父组件app传递下来，使用的是props 这些数据，我们都设置一个默认值与类型比较好。 page.vue
<script type="text/javascript">
import {getTotalPageCount} from './getData';
export default {
props: {
totalPageCount: {
type: Number,default: 0,curPageIndex: {
type: Number,pageAjcn: {
type: Number,default: 4,pageUrl: {
type: String,pageParams: {
type: Object,pageIsSync: {
type: Boolean,}
},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);
}
}
主要是个对于 组件事件的运用，=最常见的click事件，以及class与style的绑定，根据 curPageIndex与this.pageIndex来比较，判断是否拥有这个class,通过computed计算属性，来获得 页码数组 因为会根据当前页 有所变化，created的时候 计算出总页码。 最后一个是 目前生成获取静态数据的js文件.
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 = '',isSync = true) {
/ ajax /
return dataArr.length;
}
export function getTotalPageCount(url = '',eachPageSize = 7) {
/ ajax /
return Math.floor((dataArr.length + eachPageSize -1 ) / eachPageSize);
}
就这样了吧。
原文链接：https://www.f2er.com/vue/47563.html