#yyds干货盘点#28.实战练习
一、vue工程化开发准备nodejs环境
使用JS依赖包管理工具：npm 和 yarn
创建工程化Vue应用程序：vue-cli
创建和使用单文件组件
使用vue-devtools调试vue应用程序
二、实战练习
[*]创建单文件组件
[*]Mtable组件：接收props数据（headers，lists），显示分页结果
[*]分页信息使用分页组件Mpage（接收props数据：记录总数count）
[*]显示bootstrap表格和分页效果
三、实战练习（Vue代码）
1.App.vue
<template>
<div id="app">
<h5>使用表格组件</h5>
<Mtable :headers="headers" :lists="lists"></Mtable>
</div>
</template>
<script>
import Mtable from "./components/Mtable.vue";
export default {
name: 'app',
data :function() {
return {
headers: ['姓名', '年龄'],
lists: [
{ name: '张三', age: 18},
{ name: '张三', age: 18},
{ name: '李四', age: 20},
{ name: '李四', age: 20},
{ name: '王五', age: 16},
{ name: '王五', age: 16}
]
};
},
components: {
Mtable
}
}
</script>
<style>
</style>2.Mpage.vue
<template>
<nav aria-label="Page navigation">
<ul class="pagination">
<li :class="page == 1 ? 'page-item disabled' : 'page-item'" @click.prevent="prevousPage(p)">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only" >Previous</span>
</a>
</li>
<li :class="page == p ? 'page-item active' : 'page-item'" v-for="p in pagecount" :key="p">
<a class="page-link" href="#" @click.prevent="jumpToPage(p)">{{p}}</a></li>
<li :class="page == pagecount ? 'page-item disabled' : 'page-item'" @click.prevent="nextPage(p)">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only" >Next</span>
</a>
</li>
</ul>
</nav>
</template>
<script>
export default {
name: 'Mapge',
props: ['count','pagesize'],
data () {
return {
page: 1
};
},
computed: {
//计算分页码
pagecount: function(){
return Math.ceil(this.count / this.pagesize);
}
},
methods: {
prevousPage: function(p){
if(this.page > 1 ){
p = this.page = this.page - 1;
this.$emit('mpage-prevouspage',p);
}
},
jumpToPage: function(p){
this.page = p;
//向父元素更新数据
this.$emit('mpage-jumptopage',p);
},
nextPage: function(p){
if(this.page != this.pagecount){
this.page = this.page + 1;
p=this.page;
this.$emit('mpage-nextpage',p);
}
},
}
}
</script>3.Mtable
<template>
<div class="container">
<table class="table">
<thead>
<tr>
<th v-for="(item, index) in headers" :key="index">{{item}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in pagelists" :key="index">
<td v-for="(td, i) in item" :key="i">{{td}}</td>
</tr>
</tbody>
</table>
<!-- 使用分页组件 -->
<Mpage :count="lists.length" :pagesize="pagesize" @mpage-jumptopage="updatepage" @mpage-prevouspage="prevouspage" @mpage-nextpage="nextpage"></Mpage>
</div>
</template>
<script>
import Mpage from './Mpage.vue';
export default {
name: 'Mtable',
props: ['headers', 'lists'],
data: function() {
return {
pagesize: 2,
page: 1
};
},
computed: {
pagelists: function(){
//返回当前的分页记录
var offset = (this.page - 1) * this.pagesize;
return this.lists.slice(offset, offset + this.pagesize);
}
},
components: {
Mpage
},
methods: {
prevouspage: function(p){
this.page = p;
},
updatepage: function(p){
this.page = p;
},
nextpage: function(p){
this.page = p;
}
}
}
</script>
https://blog.51cto.com/u_15173612/4869355
页:
[1]