如何在 Vue 應用程式中實現分頁
分頁可讓您將大型資料集劃分為更小、更易於管理的區塊。分頁使用戶可以更輕鬆地瀏覽大型資料集並找到他們想要的資訊。
透過研究這個說明性項目，探索該方法的複雜性，並獲得將其整合到 Vue 應用程式中的實際見解。
Vue-Awesome-Paginate 入門
Vue-awesome-paginate 是一個強大且輕量級的Vue 分頁庫，可以簡化建立分頁資料顯示的過程。它提供全面的功能，包括可自訂的元件、易於使用的 API 以及對各種分頁場景的支援。
若要啟動「vue-awesome-paginate」的使用，請透過終端介面在專案目錄中執行以下命令:
npm install vue-awesome-paginate
為了設定在 Vue 專案中使用的套件，請將提供的程式碼片段貼到專案來源目錄中的 src/main.js 檔案中。
import { createApp } from "vue";
import App from "./App.vue";
import VueAwesomePaginate from "vue-awesome-paginate";
import "vue-awesome-paginate/dist/style.css";
createApp(App).use(VueAwesomePaginate).mount("#app");
目前的程式碼利用「.use()」技術整合並註冊包，使其能夠在整個應用程式中實現。同時，CSS檔案的導入也由該程式碼區塊執行。
建立測試 Vue 應用程式
為了示範「vue-awesome-paginate」套件的功能，我們將建立一個使用 Axios 從外部來源檢索資料的 Vue 應用程式。該數據作為我們分頁實現的測試案例。
‘你好世界！’};}};
<script setup>
import { ref, onBeforeMount } from "vue";
import axios from "axios";
const comments = ref([]);
const loadComments = async () => {
try {
const response = await axios.get(
`https://jsonplaceholder.typicode.com/comments`,
);
return response.data.map((comment) => comment.body);
} catch (error) {
console.error(error);
}
};
onBeforeMount(async () => {
const loadedComments = await loadComments();
comments.value.push(...loadedComments);
console.log(comments.value);
});
</script>
<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholder</h1>
<div v-if="comments.length">
<div v-for="comment in comments" class="comment">
<p>{{ comment }}</p>
</div>
</div>
<div v-else>
<p>Loading comments...</p>
</div>
</div>
</template>
提供的程式碼利用 Vue Composition API 建立一個反應式元件，該元件利用 Vue 的「onBeforeMount」生命週期掛鉤來擷取並顯示來自 JSONPlaceholder API 的註解。具體來說，該元件使用 Axios 在渲染過程開始之前取得評論資料。隨後，檢索到的評論將儲存在 comments ref 物件中以供演示之用。在此期間，如果尚未獲得評論，則會顯示適當的佔位符。
將 Vue-Awesome-Paginate 整合到您的 Vue 應用程式中
您現在擁有一個基本的 Vue 應用程序，它從 API 檢索訊息，並可以透過合併 vue-awesome-paginate 套件來增強它。此功能允許將評論分為多個部分。
請將 App.vue 檔案中 script 部分的內容替換為提供的程式碼片段，該程式碼片段由一個包含 id 屬性設定為「script」的 div 元素和另一個包含 v-for 循環迭代的 div 元素組成使用track-by 函數透過名為「scripts」的陣列。內部 div 還包括每次按鍵的動態 keydown 事件偵聽器，以及按一下按鈕任何部分時的 click 事件偵聽器。
<script setup>
import { ref, computed, onBeforeMount } from 'vue';
import axios from 'axios';
const perPage = ref(10);
const currentPage = ref(1);
const comments = ref([]);
const onClickHandler = (page) => {
console.log(page);
};
const loadComments = async () => {
try {
const response = await axios.get(
`https://jsonplaceholder.typicode.com/comments`
);
return response.data.map(comment => comment.body);
} catch (error) {
console.error(error);
}
};
onBeforeMount(async () => {
const loadedComments = await loadComments();
comments.value.push(...loadedComments);
console.log(comments.value);
});
const displayedComments = computed(() => {
const startIndex = (currentPage.value * perPage.value) - perPage.value;
const endIndex = startIndex \+ perPage.value;
return comments.value.slice(startIndex, endIndex);
});
</script>
「每頁」和「目前頁」。前者用於儲存要在每個頁面上顯示的預定數量的項目，而後者則保留序列中的當前頁碼。
該程式碼產生一個名為「 displayedComments 」的派生引用，它根據當前頁面的索引和每頁顯示的評論數量來確定評論的範圍。透過傳回落在該指定範圍內的「comments」陣列的子集，它將評論劃分到各個頁面。
事實上，您應該更新“App.vue”檔案中的“template”部分，將其替換為提供的程式碼片段。這將確保佈局在不同的螢幕尺寸上保持一致且具有視覺吸引力。
<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholder</h1>
<div v-if="comments.length">
<div v-for="comment in displayedComments" class="comment">
<p>{{ comment }}</p>
</div>
<vue-awesome-paginate
:total-items="comments.length"
:items-per-page="perPage"
:max-pages-shown="5"
v-model="currentPage"
:onclick="onClickHandler"
/>
</div>
<div v-else>
<p>Loading comments...</p>
</div>
</div>
</template>
此範本部分中用於呈現清單的 v-for 屬性指向 displayedComments 陣列。該模板新增了 vue-awesome-paginate 元件，上面的程式碼片段將 props 傳遞給該元件。您可以在 GitHub 上的套件官方文件中了解有關這些和其他屬性的更多資訊。
將所需的樣式應用到應用程式後，它將產生一個外觀類似於以下內容的網頁:
請點擊每個編號按鈕以查看與該特定選擇相關的各種註釋。
使用分頁或無限滾動以獲得更好的資料瀏覽效果
您目前在此 Vue 應用程式中的分頁實作還很初級，但可以作為透過分頁或無限滾動技術處理大型資料集的充分基礎。在這兩種方法之間做出決定之前，必須仔細評估應用程式的特定要求，因為這兩種方法都有各自的優點和缺點。