vue

关注前端社区的同学，一定知道vue。一个小巧、优雅 mvvm 框架。 目前是1.0.3正式版，然后中文文档还没更新上来。 使用了一段时间的感触就是，我再也不想直接操作DOM了。数据绑定式的编程体验真是好。实现的一个分页组件。

css

ul,li{margin: 0px;padding: 0px;
}
li{list-style: none
}
.page-bar li:first-child>a {margin-left: 0px
}
.page-bar a{border: 1px solid #ddd;text-decoration: none;position: relative;float: left;padding: 6px 12px;margin-left: -1px;line-height: 1.42857143;color: #337ab7;cursor: pointer
}
.page-bar a:hover{background-color: #eee;
}
.page-bar .active a{color: #fff;cursor: default;background-color: #337ab7;border-color: #337ab7;
}
.page-bar i{font-style:normal;color: #d44950;margin: 0px 4px;font-size: 12px;
}

模版

        
上一页
{{ index }}
下一页
共{{all}}页

在未引入js前,页面的显示,分析下,all字段简单直接输出即可,{{index}}是分页码这个需要一些动态的渲染。

js

var pageBar = new Vue({el: '.page-bar',data: {all: 20, //总页数cur: 1,//当前页码
});

调用 new Vue({参数}) 就是创建了一个基本的组件,赋值给变量 pageBar.
el就是element的缩写,定位模版的位置.data就是数据了.
知道了总页数但是要显示页码还是要一番计算,所以显示页码就是计算属性了.
所以我们要用computed

computed: {indexs: function(){var left = 1var right = this.allvar ar = [] if(this.all>= 11){if(this.cur > 5 && this.cur < this.all-4){left = this.cur - 5right = this.cur + 4}else{if(this.cur<=5){left = 1right = 10}else{right = this.allleft = this.all -9}}}while (left <= right){ar.push(left)left ++}   return ar},showLast: function(){if(this.cur == this.all){return false}return true},showFirst: function(){if(this.cur == 1){return false}return true}

ok这个页码显示规则是参考Baidu搜寻的 返回值就是[2,3,4,5,6]之类。
有了角标还需判断前一页、下一页的显示.增加showLast和showFirst字段（bool)
观看html模版发现v-if指令.很明显当内容是true就输出,否就没。
重点看下

   
{{ index }}

v-for是循环渲染输出计算属性indexs.每一次循环的子元素赋值给index v-bind:class绑定class,当渲染到目前的角标的时候加个class v-on:click是绑定了事件，我把index当参数传进入了,后面做判断，默认传event事件.
然后我们给Vue的选项里面再增加methods字段

 methods: {btnClick: function(data){//页码点击事件if(data != this.cur){this.cur = data }}}

组件交互

组件写完了，问题来了，用户点击发生页面改变，你怎么通知其他组件作出相应的变化. 可以在页角发生改变的函数下，插一条语句通知其他组件。不过这种方法是很差的做法。可以使用

watch: {cur: function(oldValue , newValue){console.log(arguments)}
}

观察了cur数据当它改变的时候，可以获取前后值。然后通知其他组件。

完整的代码可以看 github:vue-pagination

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！