今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下~

首先写组件需要考虑:

  1. 要从父组件传哪些必要的参数,即子组件需要提供什么接口
  2. 组件需要去实现哪些功能
  3. 我们要返回哪些参数给用户

针对这几点,做如下分析:

  1. 先上简单的模板:

    <template lang="html">
    <div class="page">
    <ul>
    <li><a v-on:click="prevClick()">上一页</a></li>
    <li v-for="index in pages" v-bind:class="{ active: curPage == index}">
    <a v-on:click="btnClick(index)">{{ index }}</a>
    </li>
    <li><a v-on:click="nextClick()">下一页</a></li>
    <li><a>共<i>{{totalPages}}</i>页</a></li>
    </ul>
    </div>
    </template>
  2. 将父组件传来的数据我们存放在props里,而且我们需要在data里写一个curPage来对应props里的cur,你肯定要问why!!因为vue2.0中要求不能改变props里的值的大小,但是我们这里的cur表示当前选中的页码值,是一个可变的值,那么我们就需要在created中将这两个值对应起来,后面后续就可以直接使用this.curPage了:
    props: {
    dataNum: {
    type: Number
    , default: 100
    }
    , cur: {
    type: Number
    , default:1
    } , each: {
    type: Number
    , default: 10
    }
    , visiblepage: {
    type: Number
    , default: 10
    } }
    , data: function(){
    return {
    curPage:0
    }
    }
    ,created: function(){
    this.curPage = this.cur;
    }
  3. 以上是我们已知的参数了,那么下面我们需要利用它们动态的去计算页码总数和具体要显示的页码:这部分我们放在computed中,具体神马原因移步vue文档啦~~
    computed: {
    totalPages: function(){
    return Math.ceil(this.dataNum / this.each) || 0
    }
    , pages: function(){
    var lowPage = 1;
    var highPage = this.totalPages;
    var pageArr = [];
    if(this.totalPages > this.visiblepage){
    var sub = Math.ceil(this.visiblepage/2);
    if(this.curPage > sub && this.curPage < this.totalPages - sub +1){
    lowPage = this.curPage - sub;
    highPage = this.curPage + sub - 2;
    }else if(this.curPage <= sub){
    lowPage = 1;
    highPage = this.visiblepage;
    }else{
    lowPage = this.totalPages - this.visiblepage + 1;
    highPage = this.totalPages;
    }
    } while(lowPage <= highPage){
    pageArr.push(lowPage);
    lowPage ++;
    }
    return pageArr;
    }
    }
  4. 下面添加我们用到的三个事件:
    methods: {
    btnClick: function(index){
    this.curPage = index;
    this.$emit('change-page', index)
    }
    , nextClick: function() {
    if (this.curPage < this.totalPages) {
    this.curPage++;
    this.$emit('change-page', this.curPage)
    }
    }
    , prevClick: function() {
    if (this.curPage > 0) {
    this.curPage--;
    this.$emit('change-page', this.curPage)
    }
    }
    }
  5. 上面高亮显示的部分下面会重点来讲,结合三个黄色高亮部分,我们在父组件中要使用子组件的当前页码这个值来实现分页,因为vue2.0取消了$dispatch(),所以我们怎么能从子组件把数值传出来呢?这里2.0里用到了$emit()和v-on,所以这里可以看下vue2.0的文档,然后理解一下~我理解了半天才懂。。。脑子也是慢的没谁了。。。
    <div id="app">
    <div class="content">
    <ul class="list">
    <li v-for="i in curList">{{ i }}</li>
    </ul>
    </div>
    <page :data-num="pagedata.length" :each="eachPageSize" :visiblepage="visiblepage" v-on:change-page="changePage"></page>
    </div>
     data: function(){
    return{
    cur: 0
    , dataNum: 0
    , eachPageSize: 3
    , visiblepage: 5 , pagedata: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    , curpage: 1
    } }
    , computed: {
    curList: function () {
    var p = [];
    for(var i = 0,l= this.pagedata.length;i<l;i++){
    p[i] = this.pagedata[i];
    }
    return p.splice((this.curpage-1) * this.eachPageSize, this.eachPageSize);
    }
    }
    , methods: {
    changePage: function (cur) {
    this.curpage = cur
    }
    }
  6. 上面绿色的高亮主要是解决对象引用的问题,这个问题嘛要说起来可就说来话长了。。后面我也得再捋一捋这个部分。红色高亮呢就是动态显示每一页的内容。

以上呢就是所有核心代码啦,最后显示的效果就是如下:切换时候的效果你们就自己下去尝试吧~~我要下班了哈哈~代码提交给小哥,明天说不定又有新问题要给我。。先回家睡个好觉再说~大家加油~

基于vue2.0的分页组件开发的更多相关文章

  1. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  2. 一款基于vue2.0的分页组件---写在页面内

    通过 Vue2.0 实现的分页 可自由设置分页显示的多少.上一页.下一页.省略号等,也可直接输入跳转到的页码进行跳转,分页的样式可自由调整 // 1.页面的 head 部分,需要设计好页面的样式 .p ...

  3. vue2.0实现分页组件

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...

  4. 基于VUE2.0的分页插件(很好用,很简单)

    基于jQuery的分页插件很多,今天分享一下基于Vue的分页插件pagination.js,该插件使用用感觉很不错,简单不复杂,现将个人使用过程中的方法与遇到的问题以及实例分享出来. 下载解压的主要目 ...

  5. 基于Vue2.0的单页面开发方案

    2016的最后一天,多多少少都应该总结一下这一年的得失,哪里做的好,哪里需要改进,记一笔,或许将来会用到呢. 毕业差不多半年了,一直是一个人在负责公司项目的前端开发与维护,当时公司希望前后端分离,提高 ...

  6. Vue2.0的通用组件

    饿了么基于Vue2.0的通用组件开发之路(分享会记录)   Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...

  7. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  8. vue-swiper 基于Vue2.0开发 轻量、高性能轮播插件

    vue-swiper 基于 Vue2.0 开发,基本满足大部分功能 轻量.高性能轮播插件.目前支持 无缝衔接自动轮播.无限轮播.手势轮播 没有引入第三方库,原生 js 封装,打包之后只有 8.2KB ...

  9. 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)

    最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...

随机推荐

  1. Python【7】-数据分析准备

    一.经常用到的python库: Numpy:Python科学计算的基础包: pandas:提供了能使我们快捷的处理结构化数据的大量数据结构和函数: matplotlib:用于绘制数据图表的python ...

  2. java selenium (三) 环境搭建 基于Maven

    现在Java的大部分项目都是基于Maven,  在Maven项目中使用Selenium2. 非常简单. 首先你需要配置好Maven的环境 可以参考本博客的Maven教程系列,Maven入门教程(一) ...

  3. Python模块学习笔记

    1.作用域 私有private:用'_x'或'__xx'表示,如,_a,__ab; 公有public: 如 a,b; 特殊变量,可被直接引用,如:__author__,__name__,命名变量时一般 ...

  4. V-MODEL指令实现方法

    V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个语法糖. 实际是通过下面的代码来实现的:   <%@ page language ...

  5. Apache与nginx优缺点对比

    1.nginx相对于Apache优点: nginx轻量级,同样起web服务,比apache占用更少的内存资源: 抗并发,nginx处理请求是异步非阻塞型的,Apache处理请求是阻塞型的,所以在处理高 ...

  6. 网站优化之PHPCMS如何开启伪静态

    做为一名网站优化方面的工作,那么选择CMS系统的时候,有良好的网站优化功能就是一个好的CMS的标准之一,而系统是否支持伪静态,则是URL优化的工作之一,而PHPCMS是一款网站优化方面做得比较成功的C ...

  7. Git & GitHub

    使用 Git 和 GitHub 有一段时间了,总结下经验. 起初接触 Git 是先遇到 GitHub 的,当时傻傻分不清这两者的区别,毕竟名字都那么像,刚开始只想用酷酷的方法 clone 代码(SSH ...

  8. everthing 添加右键菜单

    Tool --> Options --> General -->勾上 Show folder context menus

  9. 如何解决前端传来的时间格式与mysql表中时间格式不匹配的查询问题

    前端传过来的时间格式为“2016-07-11 11:13:10”,而数据表中对应字段`add_time`的格式为“2016-7-11”,此时sql不能直接用 "where `add_time ...

  10. Linux系统重要快捷键& Shell 常用通配符

    [Tab]:使用Tab键来进行命令补全: [Ctrl+c]:强行终止当前程序: [Ctrl+d]:键盘输入结束或退出终端: [Ctrl+s]:暂定当前程序,暂停后按下任意键恢复运行: [Ctrl+z] ...