前端開發中，分頁是常見的需求。隨著前后端分離的普及，我們可以通過nodejs和vue來實現前端分頁。本文將介紹如何使用nodejs和vue來實現前端分頁。

首先，我們需要在后端實現獲取分頁數據的接口。假設我們使用nodejs和express框架搭建后端，我們可以通過以下代碼獲取分頁數據：

var express = require('express');
var app = express();
app.get('/api/data', function(req, res) {
var pageNo = req.query.pageNo;
var pageSize = req.query.pageSize;
// 查詢數據并返回給前端
res.send({/*返回數據*/});
});
app.listen(3000, function() {
console.log('App listening on port 3000!');
});

在前端，我們需要編寫vue組件來實現分頁功能。以下是一個使用vue和element-ui組件庫實現的分頁組件：

<template>
<div>
<el-pagination
v-model="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<script>
export default {
props: {
pageSize: {
type: Number,
default: 10
},
total: {
type: Number,
default: 0
},
currentPage: {
type: Number,
default: 1
}
},
watch: {
currentPage: function(newPage) {
this.$emit('page-change', newPage);
}
}
}
</script>

使用以上代碼，我們就可以在vue組件中實現分頁功能了。在模板中，我們使用element-ui提供的el-pagination組件來實現分頁器的渲染，并通過v-model綁定currentPage屬性來獲取當前頁碼。在腳本中，我們通過watch監聽currentPage屬性的變化，并通過$emit觸發父組件的page-change事件來獲取當前頁碼，從而在父組件中調用后端接口獲取對應頁的數據。

本文介紹了如何使用nodejs和vue實現前端分頁，通過以上代碼，您可以輕松實現分頁功能并優化用戶體驗。