Table paging component based on Vue. js

This article describes how to use the table paging component based on Vue. js in detail and describes the features of Vue. js. If you are interested, refer to section 1. Introduction to Vue. js.
1. Main Features of Vue: (1) Simplicity (2) Lightweight (3) fast (4) data-driven (5) module friendliness (6) componentization
(1) Concise
The following code shows how Angular implements bidirectional binding.

// html 
 
{{ note }}
  
 // jsvar myModule = angular.module('myApp', []); myModule.controller('myCtrl', ['$scopp', function($scope) { $scope.note = '';]);

Then let's look at the Vue code:

// html 
 
{{ note }}
  
 // jsvar vm = new Vue({ el: '#app', data: { note: '' }})

In comparison, I personally think Vue code is more concise and easy to understand.

(2) Elegance

Although Vue is a lightweight framework, it is simple and user-friendly, and its APIs are easy to understand. It also provides some convenient commands and attributes.

For example:

1) bind a click event

Can be abbreviated:

2) bind dynamic attributes

Can be abbreviated:

3) convenient Modifier

4) Practical parameter features

Is it elegant.

(3) Small

Speaking of small size, we should first pay attention to the source code size of the Vue. The production version of the Vue (that is, the min version) is only 72.9kb. The official website said that after gzip compression, only 25.11kb, this is half the size of Angular 144kb.

One of the advantages of being small is that it allows users to freely choose the corresponding solution and gives users more space in combination with other libraries.

For example, Vue core does not include routing and Ajax functions by default. However, if the project requires routing and AJAX, you can directly use the official Vue-router library provided by Vue and the third-party plug-in vue-resource, you can also use other libraries or plug-ins you want to use, such as jQuery AJAX.

Is it very flexible.

(4) Great craftsmen

Although Vue is small, it is easy to build large applications.

1) Modular

Combined with some third-party module building tools, such as CommonJS, RequireJS, or SeaJs, code modularization can be easily implemented.

However, we do not recommend that you use the above build tool here. Using the modular feature of ES6 directly, and then packaging it with Webpack is currently the most popular solution.

Do not understand ES6 module function can see: http://es6.ruanyifeng.com/#docs/module
In future articles, I will also introduce it, including the configuration of Webpack.

2) componentization

The componentization function of Vue is one of its highlights. By adding the html, CSS, and js Code of a component on the page to one. managing vue files greatly improves code maintainability.

For example:

// App. vue
  
  

 Script export default {data () {return {note: 'This is an html template for a component! '}}} Script

We can also write some preprocessing languages in the components:

// App. vue
 
  
P (class = "box" v-text = "text ")
 Script export default {data () {return {note: 'This is an html template for a component! '}}} Script

Of course, we need to use webpack for packaging. We recommend using Webpack + vue-loader and ES6 syntax. We need to install babel for conversion. This article is about Vue. js, so we will not introduce it in detail here.

3) routing

Like Angular, Vue also has its routing function. With the routing function, we can load each component on demand and easily build a single-page application. The following is a simple routing configuration file:

// router.js 'use strict' export default function(router) { router.map({ '/': { component: function (resolve) { require(['./components/Foo.vue'], resolve) } }, '/foo': { component: function (resolve) { require(['./components/Foo.vue'], resolve) } }, '/bar': { component: function (resolve) { require(['./components/Bar.vue'], resolve) } } })}

(1) Usage

In the. vue component file, we write the template, that is, the html code:

 
 
 
  
  
 
   
 
    
id
 
    
name
 
    
content
 
    
remark
 
   
 
  
 
  
  
 
   
 
    
 
    
 
    
 
    
 
   
 
  
 
  
  
 
   
 
    
 
  
 
 
   
 
  
 
 
 

In the tag, async indicates whether to obtain data from the server; false indicates no; data indicates a static array of table data in pages; lens indicates an array of the number of lines displayed on each page; page-len indicates the displayed page number;

The javascript code using static data is the content in the script tag as follows:

Script import bootPage from '. /components/BootPage. vue 'export default {data () {return {lenArr: [10, 50,100], // set the length of each page to pageLen: 5, // The number of pages displayed. lists: [{num: 1, author: 'luozh ', contents: '000000', remark: 'bootpage'}, {num: 1, author: 'luozh', contents: '000000', remark: 'bootpage'}, {num: 1, author: 'luozh ', contents: '000000', remark: 'bootpage'}, {num: 1, author: 'luozh ', contents: '000000', remark: 'bootpage'}, {num: 1, author: 'luozh', contents: '2016', remark: 'bootpage'}, {num: 1, author: 'luozh ', contents: '000000', remark: 'bootpage'}], // raw table data, when using server data, you do not need to use the tableList: [] // paging data returned by the paging component }}, components: {bootPage}, events: {// the 'data' (data) {this. tableList = data }}} script

Generally, we seldom use static table data. Most applications obtain data from the server. Therefore, we provide a method to obtain the server paging data:

The server data component HTML is as follows:

The url is the request address of the server, and param is the parameter object to be sent to the server;

The javascript code for using server data is as follows:

Script import bootPage from '. /components/BootPage. vue 'export default {data () {return {lenArr: [10, 50,100], // set the length of each page to pageLen: 5, // The number of pages that can be displayed url: '/bootpage/', // Request Path param :{}, // pass the parameter tableList to the server: [] // pagination data returned by the paging component }}, methods: {refresh () {this. $ broadcast ('refresh') // a table refresh function is provided here }}, components: {bootPage}, events: {// The table data returned by the paging component (this is the data returned by the server) 'data' (data) {this. tableList = data }}} script

Note: In addition to the array content transmitted to the component table, the server also requires a key name for the total number of pages, named page_num.

For more articles about table paging components based on Vue. js, refer to the PHP Chinese website!