Vue.js implement a custom paging component Vue-paginaiton_javascript Tips

Vue implements a paging component Vue-paginaiton

The feeling that Vue used for a while is that I don't want to directly manipulate DOM anymore. The programming experience of data binding is really good. A paging component that is implemented.

The CSS here is not put out, you can see directly to GitHub download: vue-pagination

Let's take a picture of the case first.

Mould Plate

<div class= "Page-bar" >
 <ul>
 <li v-if= "Showfirsttext" ><a v-on:click= "cur--" > Prev </a></li>

 <li v-for = "index in pagenums" >
 <a v-on:click= "Pagechange (index)" >{{index }}</a>

 </li>

 <li v-if= "Shownexttext" ><a v-on:click= "cur++" > next page </a></li >
 <li><a> Total <i>{{all}}</i> page </a></li>
 </ul>

</div >

Before the introduction of JS, the page display, analysis, all the field simple direct output, {{index}} is a page number this requires some dynamic rendering.

var app = new Vue ({
 el: ' #app ',
 data:{
 currentpage:1,
 totlepage:28,
 visiblepage:10,
 msg: ' c7/>},
})

The call to new Vue ({parameter}) is the creation of a basic component, the assignment to the variable app.el is the abbreviation for the element, and the location of the template. Data is the number. I know the total pages, but to show page numbers, So the display page number is the computed property. So we're going to use computed.

Computed: {
 //computed property: Returns an array of page numbers, where the dirty check is automatically done without $watch ();
 Pagenums:function () {
 ///init front and Back page boundary
 var lowpage = 1;
 var highpage = this.totlepage;
 var pagearr = [];
 if (This.totlepage > This.visiblepage) {//The total number of pages exceeds the number of visible pages, further processing;
 var subvisiblepage = Math.ceil (THIS.VISIBLEPAGE/2) ;
 if (This.currentpage > Subvisiblepage && this.currentpage < This.totlepage-subvisiblepage + 1) {//Processing normal paging C10/>lowpage = This.currentpage-subvisiblepage;
 Highpage = This.currentpage + subVisiblePage-1;
 } else if (this.currentpage <= subvisiblepage) {//processing the logic of the first few pages
 lowpage = 1;
 Highpage = This.visiblepage;
 } else{//the logical
 lowpage = this.totlepage-this.visiblepage + 1 After the processing of several pages;
 Highpage = This.totlepage; 
 }
 When the upper and lower page boundaries are determined, prepare to press into the array while
 (Lowpage <= highpage) {
 pagearr.push (lowpage);
 Lowpage + +;
 }

 Return Pagearr
 }
 },

Look at the HTML template to find the V-IF directive. Obviously when the content is true, the output is not.

Take a look at the key

<li v-for= "index in Pagenums" v-bind:class= "{active:currentpage = = index}" >
 <a v-on:click= "Pagechange ( Index) ">{{index}}</a>
 </li>

V-for is the loop render output computed property pagenums. Each time the child element of the loop is assigned to the index V-bind:class binding class, adding a class when rendering to the current corner V-on:click is bound to the event. I put the index when the parameters into the back to make a judgment, the default pass event events.
And then we add the methods field to the Vue option.

methods:{
 pagechange:function (page) {
 if (this.currentpage!= page) {
 this.currentpage = page;
 this. $dispatch (' page-change ', page); Communication between parent-child components:==> through $diapatch (), distributing events, and the parent component bubbling through the v-on:page-change to listen to the corresponding event;}
 

Component interaction

The component is finished, the problem comes, the user clicks on the page change, how do you inform the other components to make the corresponding changes. You can insert a statement to notify other components under a function that changes the page angle. But this method is very bad practice. can use

Watch: {
 currentpage:function (OldValue, newvalue) {
 console.log (arguments)
 }
}

The currentpage data is observed when it is changed and can be obtained before and after the value. Then notify the other components.

The complete code can look github:vue-pagination

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.