基於Vue.js的表格分頁元件
- 高洛峰原創
- 2017-01-03 17:20:161553瀏覽
一、Vue.js簡介
1、Vue的主要特點： （1） 簡潔（2） 輕量（3）快速（4） 資料驅動（5） 模組友善（6） 元件化
（1） 簡潔
下面看一段Angular的實作雙向綁定的程式碼
// 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('myApp', []);
myModule.controller('myCtrl', ['$scopp', function($scope) {
$scope.note = '';
]);然後再看一下Vue的程式碼：
// html
<body>
<div id="app">
<p>{{ note }}</p>
<input type="text" v-model="note">
</div>
</body>
// js
var vm = new Vue({
el: '#app',
data: {
note: ''
}
})相比較而言我個人認為Vue的程式碼編寫風格更加簡潔，並且通俗易懂。
（2）不失優雅
Vue雖然是一個比較輕量級的框架，簡單輕量級的同時還非常的人性化，其提供的API也是非常的容易理解，同時也提供了一些很便捷的指令和屬性。
例如：
1）、綁定click事件
可以簡寫為：
<!-- 阻止单击事件冒泡 --> <a @click.stop="doSomething"></a> <!-- 只在按下回车键的时候触发事件 --> <input @keyup.enter="submit">
4)、實用的參數特性
<!-- debounce 设置一个最小的延时 --> <input v-model="note" debounce="500"> <!-- 在 "change" 而不是 "input" 事件中更新数据 --> <input v-model="msg" lazy>
怎麼樣，是不是感覺優雅極了。
（3）小巧
說起小巧，那應該首先要關注下Vue的源碼大小，Vue的成產版本（即min版）源碼僅為72.9kb，官網稱gzip壓縮後只有25.11kb，相比Angular的144kb縮小了一半。
小巧的一種好處是可以讓使用者更自由的選擇相應的解決方案，在配合其他庫方面它給了用戶更大的空間。
如Vue的核心預設是不包含路由和Ajax 功能，但是如果專案中需要路由和AJAX，可以直接使用Vue提供的官方函式庫Vue-router及第三方外掛程式vue-resource，同時你也可以使用其他你想要使用的函式庫或插件，如jQuery的AJAX等。
是不是感覺非常的靈活。
（4）不乏大匠
Vue雖然小巧，但是“麻雀雖小五臟俱全”，在構建大型應用的時候也是得心應手。
1)、模組化
結合一些第三方模組建構工具，如CommonJS、RequireJS或SeaJs，可以輕鬆實現程式碼的模組化。
但在這裡小編不推薦使用上述建置工具，直接使用ES6的模組化功能，再結合Webpack進行對應打包是目前最熱門的方案。
不了解ES6模組功能的可以詳見：http://es6.ruanyifeng.com/#docs/module
在今後的文章中，我也會對其進行介紹，包括Webpack的配置。 2)、元件化
Vue的元件化功能可謂是它的一大亮點，透過將頁面上某一元件的html、CSS、js程式碼放入一個.vue的檔案中進行管理可以大大提高程式碼的維護性。
例如：
// App.vue
<template>
<div class="box" v-text="note"></div>
</template>
<script>
export default {
data () {
return {
note: '这是一个组件的html模板！'
}
}
}
</script>
<style scoped>
.box {
color: #000;
}
</style>我們還可以在元件裡寫一些預處理語言：
// App.vue
<template>
div(class="box" v-text="text")
</template>
<script>
export default {
data () {
return {
note: '这是一个组件的html模板！'
}
}
}
</script>
<style>
.box
color: #000
</style>當然這樣寫我們是需要透過webpack來進行打包的，推薦使用Webpack + vue-loader的方式，同時使用ES6語法，需要安裝babel來進行轉換。因為文章是淺談Vue.js，所以這裡不做深入介紹。
3)、路由
和Angular一樣，Vue也具有它的路由功能。透過路由功能，我們可以實現各個元件的按需加載，輕鬆建立單頁應用程式。下面是一個簡單的路由設定檔：
// 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）使用方法
在.vue的元件檔案中我們這樣寫template，即html程式碼：
<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>
使用靜態數據的javascript代碼即script標籤內的內容如下：
<script>
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每页显示长度设置
pageLen: 5, // 可显示的分页数
lists: [
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}
], // 表格原始数据，使用服务器数据时无需使用
tableList: [] // 分页组件传回的分页后数据
}
},
components: {
bootPage
},
events: {
// 分页组件传回的表格数据
'data' (data) {
this.tableList = data
}
}
}
</script>一般我們很少使用靜態的表格數據，大多數應用的數據都是從伺服器端獲取的，所以這裡提供了獲取伺服器分頁數據的方法：
使用伺服器數據的組件HTML如下：
<script>
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每页显示长度设置
pageLen: 5, // 可显示的分页数
url: '/bootpage/', // 请求路径
param: {}, // 向服务器传递参数
tableList: [] // 分页组件传回的分页后数据
}
},
methods: {
refresh () {
this.$broadcast('refresh') // 这里提供了一个表格刷新功能
}
},
components: {
bootPage
},
events: {
// 分页组件传回的表格数据（这里即为服务器传回的数据）
'data' (data) {
this.tableList = data
}
}
}
</script>註：伺服器除了傳給元件表格的陣列內容，還需一個總頁數的鍵名，名為page_num
更多基於Vue.js的表格分頁組件相關文章請關注PHP中文網！