Home-theater-designers
Phân trang cho phép bạn chia các tập dữ liệu lớn thành các phần nhỏ hơn, dễ quản lý hơn. Phân trang giúp người dùng dễ dàng điều hướng các tập dữ liệu lớn và tìm thấy thông tin họ tìm kiếm.
Video MUO trong ngày CUỘN ĐỂ TIẾP TỤC VỚI NỘI DUNG
Tìm hiểu về kỹ thuật này và cách triển khai nó trong Vue với dự án mẫu này.
Bắt đầu với Vue-Awesome-Paginate
Vue-tuyệt vời-phân trang là một thư viện phân trang Vue mạnh mẽ và nhẹ giúp đơn giản hóa quá trình tạo hiển thị dữ liệu được phân trang. Nó cung cấp các tính năng toàn diện, bao gồm các thành phần có thể tùy chỉnh, API dễ sử dụng và hỗ trợ cho các tình huống phân trang khác nhau.
Để bắt đầu sử dụng vue-awesome-paginate, hãy cài đặt gói bằng cách chạy lệnh terminal này trong thư mục dự án của bạn:
npm install vue-awesome-paginate
Sau đó, để định cấu hình gói hoạt động trong ứng dụng Vue của bạn, hãy sao chép mã bên dưới vào src/main.js tài liệu:
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");
Mã này nhập và đăng ký gói với .sử dụng() nên bạn có thể sử dụng nó ở bất cứ đâu trong ứng dụng của mình. Gói phân trang đi kèm với một tệp CSS mà khối mã cũng nhập vào.
phải làm gì nếu bạn nghĩ rằng điện thoại của mình đã bị tấn công
Xây dựng ứng dụng Vue thử nghiệm
Để minh họa cách hoạt động của gói vue-awesome-paginate, bạn sẽ xây dựng một ứng dụng Vue hiển thị tập dữ liệu mẫu. Bạn sẽ là tìm nạp dữ liệu từ API bằng Axios cho ứng dụng này.
Sao chép khối mã bên dưới vào ứng dụng.vue tài liệu:
<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>
Khối mã này sử dụng API thành phần Vue để xây dựng một thành phần. Thành phần này sử dụng Axios để tìm nạp các nhận xét từ API JSONPlaceholder trước khi Vue gắn kết nó ( trên BeforeMount cái móc). Sau đó nó lưu trữ các ý kiến trong bình luận mảng, sử dụng mẫu để hiển thị chúng hoặc thông báo đang tải cho đến khi có nhận xét.
cửa hàng google play đã ngừng android
Tích hợp Vue-Awesome-Paginate vào ứng dụng Vue của bạn
Bây giờ bạn có một ứng dụng Vue đơn giản tìm nạp dữ liệu từ API, bạn có thể sửa đổi nó để tích hợp gói vue-awesome-paginate. Bạn sẽ sử dụng tính năng phân trang này để chia các bình luận thành các trang khác nhau.
Thay thế cái kịch bản phần của bạn ứng dụng.vue tập tin có mã này:
<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>
Khối mã này thêm hai tham chiếu phản ứng nữa: trên một trang Và trang hiện tại . Các tham chiếu này lưu trữ số mục sẽ hiển thị trên mỗi trang và số trang hiện tại tương ứng.
Mã này cũng tạo ra một ref được tính toán có tên được hiển thịNhận xét . Điều này tính toán phạm vi nhận xét dựa trên trang hiện tại Và trên một trang các giá trị. Nó trả về một lát của bình luận mảng trong phạm vi đó, sẽ nhóm các nhận xét vào các trang khác nhau.
Bây giờ, thay thế bản mẫu trong tệp App.vue của bạn với nội dung sau:
<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>
Các v-cho thuộc tính để hiển thị danh sách trong phần mẫu này trỏ đến được hiển thịNhận xét mảng. Mẫu này bổ sung thêm vue-tuyệt vời-phân trang thành phần mà đoạn mã trên chuyển đạo cụ tới. Bạn có thể tìm hiểu thêm về những điều này và các đạo cụ bổ sung trong trang chính thức của gói. tài liệu trên GitHub .
loa ngoài không hoạt động trên Android
Sau khi tạo kiểu cho ứng dụng của bạn, bạn sẽ nhận được một trang trông như thế này:
Nhấp vào từng nút được đánh số và bạn sẽ thấy một nhóm nhận xét khác nhau.
Sử dụng phân trang hoặc cuộn vô hạn để duyệt dữ liệu tốt hơn
Bây giờ bạn có một ứng dụng Vue rất cơ bản minh họa cách phân trang dữ liệu một cách hiệu quả. Bạn cũng có thể sử dụng tính năng cuộn vô hạn để xử lý các tập dữ liệu dài trong ứng dụng của mình. Hãy đảm bảo rằng bạn xem xét nhu cầu của ứng dụng trước khi chọn, vì phân trang và cuộn vô hạn đều có những ưu và nhược điểm.