Home-theater-designers
Sayfalandırma, büyük veri kümelerini daha küçük, daha yönetilebilir parçalara bölmenize olanak tanır. Sayfalandırma, kullanıcıların büyük veri kümelerinde gezinmesini ve aradıkları bilgiyi bulmasını kolaylaştırır.
MUO Günün videosu İÇERİĞE DEVAM ETMEK İÇİN KAYDIRIN
Bu örnek projeyle teknik hakkında bilgi edinin ve Vue'da nasıl uygulanacağını öğrenin.
Vue-Awesome-Paginate'e Başlarken
Vue-harika-sayfalandırma sayfalandırılmış veri görünümleri oluşturma sürecini basitleştiren güçlü ve hafif bir Vue sayfalandırma kitaplığıdır. Özelleştirilebilir bileşenler, kullanımı kolay API'ler ve çeşitli sayfalandırma senaryoları desteği dahil olmak üzere kapsamlı özellikler sağlar.
fotoğraf nasıl şeffaf yapılır
vue-awesome-paginate'i kullanmaya başlamak için proje dizininizde bu terminal komutunu çalıştırarak paketi yükleyin:
npm install vue-awesome-paginate
Ardından paketi Vue uygulamanızda çalışacak şekilde yapılandırmak için aşağıdaki kodu kopyalayın. src/main.js dosya:
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");
Bu kod paketi içe aktarır ve kaydeder. .kullanmak() Bu yöntemi uygulamanızın herhangi bir yerinde kullanabilirsiniz. Sayfalandırma paketi, kod bloğunun da içe aktardığı bir CSS dosyasıyla birlikte gelir.
Test Vue Uygulamasını Oluşturma
vue-awesome-paginate paketinin nasıl çalıştığını göstermek için örnek bir veri kümesi görüntüleyen bir Vue uygulaması oluşturacaksınız. Sen olacaksın Axios ile bir API'den veri alma bu uygulama için.
Aşağıdaki kod bloğunu telefonunuza kopyalayın uygulama.vue dosya:
<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>
Bu kod bloğu şunu kullanır: Vue Kompozisyon API'si bir bileşen oluşturmak için. Bileşen, Vue onu bağlamadan önce JSONPlaceholder API'sinden yorumları almak için Axios'u kullanır ( onBeforeMount kanca). Daha sonra yorumları depolar. yorumlar dizi, bunları görüntülemek için şablonu veya yorumlar mevcut olana kadar bir yükleme mesajını kullanarak.
Vue-Awesome-Paginate'i Vue Uygulamanıza Entegre Etme
Artık bir API'den veri alan basit bir Vue uygulamanız var, bunu vue-awesome-paginate paketini entegre edecek şekilde değiştirebilirsiniz. Yorumları farklı sayfalara bölmek için bu sayfalandırma özelliğini kullanacaksınız.
telefonum bluetooth üzerinden hacklenebilir mi
Değiştir senaryo senin bölümün uygulama.vue bu koda sahip dosya:
<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>
Bu kod bloğu iki reaktif referans daha ekler: Sayfa başına Ve geçerli sayfa . Bu referanslar sırasıyla sayfa başına görüntülenecek öğe sayısını ve geçerli sayfa numarasını saklar.
Kod aynı zamanda adında bir hesaplanmış başvuru oluşturur. görüntülenenYorumlar . Bu, yorum aralığını aşağıdakilere göre hesaplar: geçerli sayfa Ve Sayfa başına değerler. Bir dilim döndürür yorumlar Yorumları farklı sayfalara gruplayacak olan bu aralıktaki dizi.
Şimdi değiştirin şablon App.vue dosyanızın aşağıdakileri içeren bölümü:
facebook hesabıma erişemiyorum
<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-için listeleri oluşturma özelliği Bu şablon bölümünde şuna işaret edilir: görüntülenenYorumlar sıralamak. Şablon şunları ekler: vue-harika-sayfalandırma Yukarıdaki pasajın sahne malzemelerini aktardığı bileşen. Bunlar ve ek aksesuarlar hakkında daha fazla bilgiyi paketin resmi sayfasından edinebilirsiniz. GitHub'daki belgeler .
Uygulamanızı şekillendirdikten sonra şuna benzer bir sayfa almalısınız:
Her numaralı düğmeye tıkladığınızda farklı bir yorum kümesi göreceksiniz.
Daha İyi Veri Taraması için Sayfalandırmayı veya Sonsuz Kaydırma'yı kullanın
Artık verilerin nasıl verimli bir şekilde sayfalandırılacağını gösteren çok basit bir Vue uygulamanız var. Uygulamanızda uzun veri kümelerini işlemek için sonsuz kaydırmayı da kullanabilirsiniz. Sayfalandırma ve sonsuz kaydırmanın artıları ve eksileri olduğundan, seçim yapmadan önce uygulamanızın ihtiyaçlarını göz önünde bulundurduğunuzdan emin olun.