Home-theater-designers
Lehtede lehitsemine võimaldab jagada suured andmekogumid väiksemateks, paremini hallatavateks tükkideks. Lehtede lehitsemine hõlbustab kasutajatel suurtes andmekogumites navigeerimist ja otsitava teabe leidmist.
MUO päeva video SISUGA JÄTKAMISEKS KERIMISE
Selle näidisprojekti abil saate teada tehnika ja selle Vue's rakendamise kohta.
Vue-Awesome-Paginate'iga alustamine
Vue-awesome-paginate on võimas ja kerge Vue lehekülgede jagamise teek, mis lihtsustab leheküljeliste andmekuvarite loomise protsessi. See pakub kõikehõlmavaid funktsioone, sealhulgas kohandatavaid komponente, hõlpsasti kasutatavaid API-sid ja tuge erinevatele lehekülgede muutmise stsenaariumidele.
kuidas kopeerida ipod -muusikat arvutisse
Vue-awesome-paginate kasutamise alustamiseks installige pakett, käivitades oma projekti kataloogis selle terminali käsu:
npm install vue-awesome-paginate
Seejärel kopeerige allolev kood, et konfigureerida pakett oma Vue rakenduses töötama src/main.js fail:
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");
See kood impordib ja registreerib paketi rakendusega .use() meetodit, nii et saate seda kasutada kõikjal oma rakenduses. Leheküljepaketiga on kaasas CSS-fail, mille koodiplokk ka impordib.
Rakenduse Test Vue loomine
Paketi vue-awesome-paginate toimimise illustreerimiseks loote Vue rakenduse, mis kuvab näidisandmestiku. Sa saad olema andmete toomine API-st koos Axiosega selle rakenduse jaoks.
Kopeerige allolev koodiplokk oma app.vue fail:
<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>
See koodiplokk kasutab Vue Composition API komponendi ehitamiseks. Komponent kasutab Axiost kommentaaride toomiseks JSONPlaceholder API-st, enne kui Vue selle ühendab ( onBeforeMount konks). Seejärel salvestab see kommentaarid jaotisesse kommentaarid massiivi, kasutades nende kuvamiseks malli või laadimissõnumit, kuni kommentaarid on saadaval.
kui palju maksab telefoni avamine
Vue-Awesome-Paginate'i integreerimine oma Vue rakendusse
Nüüd on teil lihtne Vue rakendus, mis hangib andmeid API-st. Saate seda muuta, et integreerida pakett vue-awesome-paginate. Kasutate seda lehekülgede muutmise funktsiooni, et jagada kommentaarid erinevatele lehtedele.
Asendage stsenaarium osa teie app.vue faili selle koodiga:
<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>
See koodiplokk lisab veel kaks reaktiivset viidet: lehekülje kohta ja Käesolev lehekülg . Need viited salvestavad vastavalt kuvatavate üksuste arvu lehel ja praeguse lehekülje numbri.
Kood loob ka arvutatud viite nimega kuvatud kommentaarid . See arvutab kommentaaride vahemiku põhjal Käesolev lehekülg ja lehekülje kohta väärtused. See tagastab lõigu kommentaarid massiivi selles vahemikus, mis rühmitab kommentaarid erinevatele lehtedele.
Nüüd asendage malli teie faili App.vue jaotises on järgmine teave:
<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>
The v-eest atribuut renderdusloendite jaoks selles malli jaotises osutab kuvatud kommentaarid massiivi. Mall lisab vue-awesome-paginate komponent, millele ülaltoodud väljavõte annab rekvisiidid. Nende ja täiendavate rekvisiitide kohta saate lisateavet paketi ametlikust osast dokumentatsioon GitHubis .
Pärast rakenduse stiili kujundamist peaksite saama lehe, mis näeb välja selline:
Klõpsake igal nummerdatud nupul ja näete erinevat kommentaaride komplekti.
Parema andmete sirvimiseks kasutage lehekülgede jagamist või lõpmatut kerimist
Nüüd on teil väga lihtne Vue rakendus, mis näitab, kuidas andmeid tõhusalt lehekülgedega jagada. Saate kasutada ka lõputut kerimist, et hallata oma rakenduses pikki andmekogumeid. Enne rakenduse valimist kaaluge kindlasti oma rakenduse vajadusi, kuna lehekülgedel ja lõputul kerimisel on plusse ja miinuseid.
kuidas teha Facebookis fotokollaaži