简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Table paging component based on Vue.js

Table paging component based on Vue.js

高洛峰
高洛峰Original
2017-01-03 17:20:161510browse

1. Introduction to Vue.js
1. The main features of Vue: (1) Simplicity (2) Lightweight (3) Fast (4) Data-driven (5) Module-friendly (6) Componentization
(1) Simplicity
Let’s look at a piece of Angular code that implements two-way binding 

// html
<body ng-app="myApp">
 <div ng-controller="myCtrl">
 <p>{{ note }}</p>
 <input type="text" ng-model="note">
 </div>
</body>
 
// js
var myModule = angular.module(&#39;myApp&#39;, []);
 
myModule.controller(&#39;myCtrl&#39;, [&#39;$scopp&#39;, function($scope) {
 $scope.note = &#39;&#39;;
]);

Then look at the Vue code: 

// html
<body>
 <div id="app">
 <p>{{ note }}</p>
 <input type="text" v-model="note">
 </div>
</body>
 
// js
var vm = new Vue({
 el: &#39;#app&#39;,
 data: {
 note: &#39;&#39;
 }
})

In comparison, I personally think that the Vue code The writing style is more concise and easy to understand.

(2) Elegance

Although Vue is a relatively lightweight framework, it is simple and lightweight and very user-friendly. The API it provides is also very easy to understand. It also provides some very convenient instructions and attributes.

For example:

1), bind click event

913ab33578b43051d8ce890f7743009b5db79b134e9f6b82c0b36e0489ee08ed
Yes The abbreviation is:

38093ba80be0a4113dd32240a24b45cb5db79b134e9f6b82c0b36e0489ee08ed

2), binding dynamic attributes

16e870cf50e90f7deae53a5851f2cc775db79b134e9f6b82c0b36e0489ee08ed
can be abbreviated as:

ac5bf7cdada38e71acd4bc784b68c64f5db79b134e9f6b82c0b36e0489ee08ed

3), convenient modifiers

<!-- 阻止单击事件冒泡 -->
<a @click.stop="doSomething"></a>
 
<!-- 只在按下回车键的时候触发事件 -->
<input @keyup.enter="submit">

4), how about practical parameter features

<!-- debounce 设置一个最小的延时 -->
<input v-model="note" debounce="500">
 
<!-- 在 "change" 而不是 "input" 事件中更新数据 -->
<input v-model="msg" lazy>

, doesn’t it feel very elegant?

(3) Small and exquisite

Speaking of compact, you should first pay attention to the source code size of Vue. The source code of the production version of Vue (i.e. min version) is only 72.9kb, and the official website calls it gzip After compression, it is only 25.11kb, which is half the size of Angular’s ​​144kb.

One of the benefits of being compact is that it allows users to choose corresponding solutions more freely, and it gives users more space in coordinating with other libraries.

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

Doesn’t it feel very flexible?

(4) There is no shortage of masters

Although Vue is small, it has all the internal organs, and it is also handy when building large-scale applications.

1), Modularization

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

However, the editor here does not recommend using the above-mentioned construction tools. Directly using the modular function of ES6 and combining it with Webpack for corresponding packaging is currently the most popular solution.

If you don’t understand the functions of ES6 modules, please see: http://es6.ruanyifeng.com/#docs/module
In future articles, I will also introduce them, including Webpack. configuration.

2), Componentization

The componentization function of Vue can be said to be one of its highlights. By putting the html, CSS, and js code of a certain component on the page into a .vue Management in files can greatly improve the maintainability of the code.

For example: 

// App.vue
<template>
 <div class="box" v-text="note"></div>
</template>
 
<script>
export default {
 data () {
 return {
 note: &#39;这是一个组件的html模板！&#39;
 }
 }
}
</script>
 
<style scoped>
.box {
 color: #000;
}
</style>

We can also write some preprocessing language in the component: 

// App.vue
<template>
 div(class="box" v-text="text")
</template>
 
<script>
export default {
 data () {
 return {
 note: &#39;这是一个组件的html模板！&#39;
 }
 }
}
</script>
 
<style>
.box 
 color: #000
</style>

Of course, we need to package it through webpack. It is recommended to use Webpack + vue-loader method, while using ES6 syntax, requires babel to be installed for conversion. Because the article is about Vue.js briefly, I won’t give an in-depth introduction here.

3), routing

Like Angular, Vue also has its routing function. Through 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
 
&#39;use strict&#39;
 
export default function(router) {
 router.map({
 &#39;/&#39;: {
 component: function (resolve) {
 require([&#39;./components/Foo.vue&#39;], resolve)
 }
 },
 &#39;/foo&#39;: {
 component: function (resolve) {
 require([&#39;./components/Foo.vue&#39;], resolve)
 }
 },
 &#39;/bar&#39;: {
 component: function (resolve) {
 require([&#39;./components/Bar.vue&#39;], resolve)
 }
 }
 })
}

(1) Usage method

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

<table class="table table-hover table-bordered">
 <thead>
 <tr>
 <th width="10%">id</th>
 <th width="30%">name</th>
 <th width="40%">content</th>
 <th width="20%">remark</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="data in tableList">
 <td v-text="data.num"></td>
 <td v-text="data.author"></td>
 <td v-text="data.contents"></td>
 <td v-text="data.remark"></td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td colspan="4">
  <div class="col-sm-12 pull-right">
  <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen"></boot-page>
  </div>
 </td>
 </tr>
 </tfoot>
 </table>

The async in the 79c8058d7ca51037cffc56aab1987043 tag refers to whether to obtain data from the server, false means no; data is a static array of paginated table data; lens is an array showing the number of rows per page; page-len is the page number that can be displayed Number;

The javascript code that uses static data, that is, the content in the script tag is as follows:

<script>
 import bootPage from &#39;./components/BootPage.vue&#39;
 
 export default {
 data () {
 return {
  lenArr: [10, 50, 100], // 每页显示长度设置
  pageLen: 5, // 可显示的分页数
  lists: [
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;},
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;},
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;},
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;},
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;},
  {num: 1, author: &#39;luozh&#39;, contents: &#39;123&#39;, remark: &#39;bootPage&#39;}
  ], // 表格原始数据，使用服务器数据时无需使用
  tableList: [] // 分页组件传回的分页后数据
 }
 },
 components: {
 bootPage
 },
 events: {
 
 // 分页组件传回的表格数据
 &#39;data&#39; (data) {
  this.tableList = data
 }
 }
 }
 </script>

Generally, we rarely use static table data, and most application data are obtained from the server. , so here is a method to obtain server paging data:

The component HTML that uses server data is as follows:

8df561538fba9f62631b6907f6b62183c14dafede575dc3552d7bf41fdda4a57
where url is the request address of the server; param is the parameter object that needs to be sent to the server;

The code for using server data javascript is as follows: 

<script>
 import bootPage from &#39;./components/BootPage.vue&#39;
 
 export default {
 data () {
 return {
  lenArr: [10, 50, 100], // 每页显示长度设置
  pageLen: 5, // 可显示的分页数
  url: &#39;/bootpage/&#39;, // 请求路径
  param: {}, // 向服务器传递参数
  tableList: [] // 分页组件传回的分页后数据
 }
 },
 methods: {
 refresh () {
  this.$broadcast(&#39;refresh&#39;) // 这里提供了一个表格刷新功能
 }
 },
 components: {
 bootPage
 },
 events: {
 
 // 分页组件传回的表格数据（这里即为服务器传回的数据）
 &#39;data&#39; (data) {
  this.tableList = data
 }
 }
 }
</script>

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

For more articles related to table paging components based on Vue.js, please pay attention to the PHP Chinese website!


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Implement SPA application using node+vue.jsNext article：Implement SPA application using node+vue.js

Related articles

See more