Table paging component based on Vue.js-JS Tutorial-php.cn

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;;
]);

Copy after login

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;
 }
})

Copy after login

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

Yes The abbreviation is:

2), binding dynamic attributes

can be abbreviated as:

3), convenient modifiers

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

Copy after login

4), how about practical parameter features

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

Copy after login

, 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>

Copy after login

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>

Copy after login

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)
 }
 }
 })
}

Copy after login

(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>

Copy after login

The async in the 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>

Copy after login

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:

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>

Copy after login

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!