這篇文章給大家分享的是有關(guān)Vue.js分頁組件如何實現(xiàn)diVuePagination的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)服務項目包括襄城網(wǎng)站建設、襄城網(wǎng)站制作、襄城網(wǎng)頁制作以及襄城網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，襄城網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到襄城省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

一.介紹

Vue.js 是什么

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復雜的單頁應用提供驅(qū)動。

二.創(chuàng)建初始化項目

這里不在詳細說明，我們的分頁演示只需要vue和vue-router就可以了，我們直接構(gòu)建項目和設置配置。

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // （縮寫）相當于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

App.vue:

pageHome.vue:

pageInfo.vue:

pageNews.vue:

預覽效果：

三.分頁靜態(tài)結(jié)構(gòu)和樣式

divuePage.vue:

main.js注冊：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//注冊組件
import divuePage from './divuePage.vue'
Vue.component('divue-page', divuePage)
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // （縮寫）相當于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

pageHome.vue引用：

效果預覽：

四.分頁組件實現(xiàn)邏輯分析

我們分析一下如何實現(xiàn)我們的分頁組件：

從分頁組件考慮：

分頁組件需要顯示頁數(shù)，那么就需要傳遞給分頁組件總用多少頁這個狀態(tài)，

上一頁和下一頁存在不可用狀態(tài)，在第一頁上一頁不可用，所以要把當前所在頁數(shù)傳遞，同樣頁數(shù)的焦點位置也需要它判斷，

然后就是方法，我們頁數(shù)和按鈕的點擊都是發(fā)起請求，攜帶的參數(shù)就是當前點擊的頁數(shù)，

1.總頁數(shù)，當前所在頁，可在父組件傳遞進入

2.發(fā)起請求的方法可以通過組件交互通信實現(xiàn)

1的數(shù)據(jù)都是接口會返回給我們的，我們直接以屬性傳遞即可：

2的實現(xiàn)也很簡單，我們其實已經(jīng)處理模擬使用過了：

我們只需要自定義事件，讓分頁組件$emit即可：

pageHome.vue:

五.分頁組件邏輯編寫

divuePage.vue我們接受了這些傳遞的內(nèi)容，總頁數(shù)和當前所在頁，然后點擊第一頁觸發(fā)自定義事件，傳遞給父組件一個1，獲取第一頁數(shù)據(jù)：

1.頁數(shù)顯示

我們的首要工作就是把頁數(shù)顯示出來，我們已經(jīng)接收了總頁數(shù)，其實這個問題很容易解決，我們設置一個計算屬性，屬性依據(jù)總頁數(shù)生成一個數(shù)組，從1到n即可：

顯示：

這樣還不夠健壯，還有一個就是總頁數(shù)5做分界線，大于5就顯示當前到后4個，

比如在第3頁，顯示：3 4 5 6 7

第2頁，顯示：2 3 4 5 6

好了我們加入一些小的邏輯判斷：

我們要給當前頁加一個類名標識，已經(jīng)獲取當前的頁數(shù)了，我們加一個判斷就可以了，在v-for中：

我們在加入點擊事件，拿到點擊的item就是要請求后臺數(shù)據(jù)的參數(shù)page:

定義這個方法：

完整代碼：

效果測試：

2.第一頁和最后一頁處理

這個很簡單，只是傳遞page參數(shù)，我們已經(jīng)獲取總頁數(shù)，直接設置即可！

3.上一頁和下一頁處理

這個對比第一頁需要加入特殊的處理，當前是第一頁，這個按鈕就不可用狀態(tài)，下一頁一樣的邏輯判斷當前是不是在最后一頁：

調(diào)用位置加入事件，在加一個是否可用的類名：

全部代碼：

效果測試：

4.跳頁處理

這個我們獲取輸入框的值，直接調(diào)用，不過對輸入的內(nèi)容必須有一些判斷限制：

加一個data:

使用位置：

5.顯示總頁數(shù)

這個是最簡單的：

六.分頁全部代碼和測試

divuePage.vue:

我們現(xiàn)在在pageHome.vue做了使用，這個模擬數(shù)據(jù)包含7頁，我們在另外兩個組件也使用分頁組件，測試小于5頁和只有1頁的效果：

直接粘貼就可以在另外的組件使用。

只有1頁：

小于5頁：

測試沒有太大問題！

七.優(yōu)化和改進建議

當然不是樣式的優(yōu)化，這個需要設計的參與，我們還是顯示的優(yōu)化和改進，比如：

我們是不是該有一個...

還有就是...

可以參考別的分頁效果，然后你可以不斷的改進！

八.完整代碼

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import pageHome from './pageHome.vue'
import pageNews from './pageNews.vue'
import pageInfo from './pageInfo.vue'
//注冊組件
import divuePage from './divuePage.vue'
Vue.component('divue-page', divuePage)
//路由配置
Vue.use(VueRouter);
var routes = [
 { path: '/', component: pageHome},
 { path: '/pageNews', component: pageNews},
 { path: '/pageInfo', component: pageInfo}
]
var router = new VueRouter({
 routes: routes // （縮寫）相當于 routes: routes
})
new Vue({
 el: '#app',
 router,
 render: h => h(App)
})

App.vue:

divuePage.vue:

pageHome.vue:

pageInfo.vue:

pageNews.vue:

感謝各位的閱讀！關(guān)于“Vue.js分頁組件如何實現(xiàn)diVuePagination”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！