Listen Rendering og Vue ‘ s v-for-Direktivet

0
55

Listen gjengivelse er en av de mest brukte praksis i front-end web-utvikling. Dynamisk liste gjengivelse er ofte brukt for å presentere en serie av lignende gruppert informasjon i en kortfattet og vennlig format til brukeren. I nesten alle web-programmet vi bruker, kan vi se lister over innhold i mange områder av appen.

I denne artikkelen vil vi samle en forståelse av Vue ‘ s v-for direktivet til å generere dynamiske lister, samt gå gjennom noen eksempler på hvorfor nøkkelen attributtet skal brukes når du gjør det.

Siden vi skal forklare ting grundig når vi starter å skrive kode, denne artikkelen forutsetter at du har ingen eller svært lite kunnskap med Vue (og/eller andre JavaScript-rammeverk).

Case Study:

Vi kommer til å bruke som case for denne artikkelen.

Når du er logget på og i hovedindeksen ruten vi er presentert med en visning som likner på dette:

På hjemmesiden, har vi blitt vant til å se en liste over trender, en liste over tweets, en liste over potensielle tilhengere, etc. Innholdet som vises i disse listene er avhengig av en rekke faktorer—vår historie, som vi følger, vår liker, etc. Som et resultat, kan vi si at alle disse dataene er dynamisk.

Selv om disse dataene er dynamisk oppnådd, hvordan dataene er vist forblir den samme. Dette er delvis på grunn av bruk av gjenbrukbare web-komponenter.

For eksempel, kan vi se liste over tweets som en liste av enkle tweet-komponent elementer. Vi kan tenke på tweet-komponent som et skall som tar data slags, for eksempel brukernavn, håndtak, tweet og avatar, blant andre stykker, og som bare viser de biter på en konsekvent markering.

La oss si at vi ønsket å gjengi en liste over komponenter (f.eks. en liste over tweet-komponent elementer) basert på en stor datakilde hentet fra en server. I Vue, det første som bør komme til tankene for å oppnå dette er det v-for direktivet.

V-for-direktivet

V-for-direktivet brukes til å vise en liste over elementer som er basert på en datakilde. Direktivet kan brukes på en mal element og krever en bestemt syntaks langs linjene av:

La oss se et eksempel på dette i praksis. Først vil vi anta vi har allerede fått en samling av tweet data:

const tweets = [
{
id: 1,
name: ‘James’,
håndtak: ‘@jokerjames’,
img: ‘https://semantic-ui.com/images/avatar2/large/matthew.png’,
tweet: “Hvis du ikke lykkes, støv av deg selv og prøv igjen.”,
liker: 10,
},
{
id: 2,
name: ‘Fatima’,
håndtak: ‘@fantasticfatima’,
img: ‘https://semantic-ui.com/images/avatar2/large/molly.png’,
tweet: “Bedre sent enn aldri, men aldri for sent er bedre.’,
liker: 12,
},
{
id: 3,
name: ‘Xin’,
håndtak: ‘@xeroxin’,
img: ‘https://semantic-ui.com/images/avatar2/large/elyse.png’,
tweet: ‘Skjønnheten i kampen, stygghet i suksess.’,
liker: 18,
}
]

tweets er en samling av tweet objekter med hver tweet som inneholder detaljer om en bestemt tweet—en unik identifikator navn/håndtaket på konto, en twitter-melding, etc. La oss nå forsøke å bruke v-for direktivet til å gjengi en liste over tweet komponenter basert på disse dataene.

Først og fremst skal vi opprette Vue eksempel, i hjertet av Vue-programmet. Vi vil montere/fest vårt eksempel til en DOM-element av id-app og tilordne tweets samling som en del av eksempel er data objekt.

nye Vue({
el: ‘#app’,
data: {
tweets
}
});

Vi vil nå gå videre og opprette en twitter-melding-komponent som vår v-for-direktivet vil bruke til å gjengi en liste. Vi vil bruke den globale Vue.komponent konstruktør å opprette en komponent som heter tweet-komponent:

Vue.komponent(‘tweet-komponent’, {
mal: `
<div class=”tweet”>
<div class=”box”>
<artikkelen class=”media”>
<div class=”media-venstre”>
<figur class=”image-64×64″>
<img :src=”tweet.img” alt=”Bilde”>
</figure>
</div>
<div class=”media-content”>
<div class=”content”>
<p>
<strong>{{tweet.navn}}</strong> <small>{{tweet.håndtere}}</small>
<br>
{{tweet.tweet}}
</p>
</div>
<div class=”level-venstre”>
<a class=”level-element”>
<span class=”icon-small”><i class=”fas fa-hjerte”></i></span>
<span class=”liker”>{{tweet.liker}}</span>
</a>
</div>
</div>
</article>
</div>
</div>
`,
rekvisittar: {
tweet: Objekt
}
});

Et par interessante ting å merke seg her.

  1. Tweet-komponent forventer en tweet objekt prop sett i prop validering kravet (rekvisitter: {tweet: – Objekt}). Hvis komponenten er gjengitt med en tweet prop som ikke er et objekt, Vue vil sende ut advarsler.
  2. Vi er bindende egenskaper tweet objekt prop på å komponenten mal med hjelp av Bart syntaks: {{ }}.
  3. Komponenten markup tilpasser seg Gero Boksen element som det representerer en god likhet med en tweet.

I HTML-mal, som vi trenger for å lage markup hvor våre Vue app vil bli montert (dvs. elementet med id-en til appen). I denne markeringen, og vi vil bruke v-for direktivet til å gjengi en liste over tweets. Siden tweets er for innsamling av data vil vi være iterating over, tweet vil være et passende alias til bruk i direktivet. I hvert gjengitt tweet-komponent, vi vil også passere i iterated tweet objekt som rekvisitter for at det skal være tilgang på komponenten.

<div id=”app” class=”kolonner”>
<div class=”column”>
<tweet-komponent v-=”tweet på twitter” :tweet=”tweet”/>
</div>
</div>

Uavhengig av hvor mange flere tweet objekter ville bli introdusert til innsamlingen; eller hvordan de vil endre seg over tid—vår satt opp vil alltid yte alle tweets i samling i samme markup vi forventer.

Med hjelp av noen egendefinert CSS, vår app vil se ut noe som dette:

Se Penn Enkel Mate #1 av Hassan Dj (@itslit) på CodePen.

Selv om alt fungerer som forventet, kan vi bli bedt om med en Vue tips i vår nettleser-konsollen:

[Vue tips]: <tweet-komponent v-=”tweet i tweets”>: komponent lister gjengitt med v-for bør ha eksplisitte tastene…

Du kan ikke være i stand til å se advarsel i nettleseren konsollen når du kjører den koden gjennom CodePen.

Hvorfor er Vue fortelle oss om å angi eksplisitt tastene i vår liste når alt fungerer som forventet?

nøkkel

Det er vanlig å angi en viktig attributt for hver iterated element innen en gjengis v-etter-listen. Dette er fordi Vue bruker key-attributtet til å lage unike bindinger for hver node identitet.

La oss forklare dette litt mer—hvis det var noen dynamiske endringer i GRENSESNITTET til våre listen (f.eks. rekkefølgen på listen elementer blir stokket), Vue vil gå mot å endre data innen hvert element i stedet for å flytte DOM elementer tilsvarende. Dette vil ikke være et problem i de fleste tilfeller. Men i visse tilfeller hvor vår v-for listen avhenger DOM staten og/eller barn komponent staten, kan dette føre til at noen utilsiktet atferd.

La oss se et eksempel på dette. Hva om vår enkle tweet komponent nå finnes et tekstfelt som vil tillate brukeren å svare direkte til en twitter-melding? Vi vil ignorere hvordan dette svaret kan være sendt, og rett og slett-postadressen til den nye input-feltet i seg selv:

Vi kommer til å ta dette nye feltet på mal av tweet-komponent:

Vue.komponent(‘tweet-komponent’, {
mal: `
<div class=”tweet”>
<div class=”box”>
// …
</div>
<div class=”kontroll-ikoner-venstre har-ikoner-right”>
<input class=”inndata-er-liten” plassholder=”Tweet svaret ditt…” />
<span class=”icon er-small-venstre”>
<i class=”fas fa-konvolutt”></i>
</span>
</div>
</div>
`,
rekvisittar: {
tweet: Objekt
}
});

Anta at vi ønsket å presentere en annen ny funksjon i vår app. Denne funksjonen ville innebære å tillate brukeren å lage et tilfeldig liste over tweets tilfeldig.

For å gjøre dette, og vi kan først legge inn en “Shuffle!” – knappen i vår HTML-malen:

<div id=”app” class=”kolonner”>
<div class=”column”>
<- knappen class=”er-primære knappen” @klikk=”shuffle”>Shuffle!</knappen>
<tweet-komponent v-=”tweet på twitter” :tweet=”tweet”/>
</div>
</div>

Vi har festet et klikk event lytteren på knappen element for å ringe en tilfeldig metode når den utløses. I vår Vue eksempel; skal vi opprette shuffle metode ansvarlig i tilfeldig stokking tweets samling i forekomsten. Vi vil bruke lodash er _shuffle metode for å oppnå dette:

nye Vue({
el: ‘#app’,
data: {
tweets
},
metoder: {
shuffle (tilfeldig() {
dette.tweets = _.shuffle(denne.tweets)
}
}
});

La oss prøve det ut! Hvis vi klikker shuffle et par ganger, og vi vil legge merke til vår tweet elementer blir tilfeldig usorterte med hvert klikk.

Se Penn Enkel Mate #2 av Hassan Dj (@itslit) på CodePen.

Imidlertid, hvis vi skriver noen informasjon i input av hver komponent klikk deretter tilfeldig rekkefølge; vi vil legge merke til noe underlig skjer:

Siden vi ikke har valgt å bruke tasten attributt, Vue har ikke skapt unike bindinger til hver tweet node. Som et resultat, når vi tar sikte på å omorganisere tweets, Vue tar det mer effektivt å lagre tilnærming til å bare endre (eller plaster) data i hvert element. Siden den midlertidige DOM staten (dvs. de som er angitt tekst) er fortsatt på plass, opplever vi dette utilsiktet forskjell.

Her er et diagram som viser oss de data som blir oppdatert på hvert element, og DOM stat som fortsatt er på plass:

For å unngå dette, er vi nødt til å tilordne en unik nøkkel til hver tweet-komponent gjengitt i listen. Vi bruker-id-en tweet for å være den unike id-siden bør vi trygt si en tweet er id-en bør ikke være lik som for en annen. Fordi vi bruker dynamiske verdier, vil vi bruke v-bind direktivet til å binde vår nøkkel til å tweet.id:

<div id=”app” class=”kolonner”>
<div class=”column”>
<- knappen class=”er-primære knappen” @klikk=”shuffle”>Shuffle!</knappen>
<tweet-komponent v-=”tweet på twitter” :tweet=”tweet” :key=”tweet.id” />
</div>
</div>

Nå, Vue gjenkjenner hver tweet er noden er identitet, og dermed vil endre rekkefølgen på komponentene når vi har tenkt på å stokke listen.

Siden hver tweet komponent blir nå flyttet følgelig kan vi ta dette ett skritt videre og bruke Vue ‘ s overgang-gruppe for å vise hvordan elementene blir omorganisert.

For å gjøre dette, vil vi legge til overgangen-gruppe-element som en wrapper til v-etter-listen. Vi vil angi en overgang navnet på tweets og erklærer at overgangen gruppe skal gjengis som et div-element.

<div id=”app” class=”kolonner”>
<div class=”column”>
<- knappen class=”er-primære knappen” @klikk=”shuffle”>Shuffle!</knappen>
<overgang-gruppe name=”tweets” tag=”div”>
<tweet-komponent v-=”tweet på twitter” :tweet=”tweet” :key=”tweet.id” />
</overgang-gruppe>
</div>
</div>

Basert på navnet på overgangen, Vue vil automatisk gjenkjenne hvis noen CSS overganger/animasjoner har blitt spesifisert. Siden vi har som mål å påberope seg en overgang for flytting av elementene i listen; Vue vil se etter en angitt CSS overgang langs linjene av tweets-flytt (der tweets er navnet gitt til vår overgang gruppe). Som et resultat, vil vi manuelt innføre en .tweets-flytte klasse som har en angitt type og tidspunkt for overgangen:

#app .tweets-flytte {
overgang: forvandle 1s;
}

Dette er en svært kort, se inn anvendelse liste overganger. Pass på å sjekke ut de Vue dokumenter for detaljert informasjon om alle de forskjellige typer av overganger som kan brukes!

Vår tweet-komponent elementer vil nå hensiktsmessig overgang mellom steder når en shuffle er tatt i bruk. Gi det et forsøk! Skriv inn informasjon i feltene og klikk “Shuffle!” et par ganger.

Se Penn Enkel Mate #3 av Hassan Dj (@itslit) på CodePen.

Ganske kult, ikke sant? Uten nøkkel-attributtet, overgangen-gruppe-elementet ikke kan brukes til å lage listen overganger siden elementene er oppdatert på plass i stedet for å være organisert.

Bør nøkkelen attributt alltid brukes? Det er anbefalt. De Vue dokumenter angi at nøkkelen attributtet skal bare være unnlates dersom:

  • Vi vil med vilje standard slags lapp elementer i stedet for ytelse grunner.
  • DOM innhold er enkel nok.

Konklusjon

Og der har vi det! Forhåpentligvis denne korte artikkelen skildret hvor nyttig v-for direktivet er så godt som gitt litt mer kontekst til hvorfor nøkkelen attributtet brukes ofte. La meg vite om du kan ha noen spørsmål/tanker overhodet!

Hvis du likte min stil å skrive og er potensielt interesserte i å lære hvordan å bygge apps med Vue.js du kan gjerne bestille Fullstack Vue: Komplett Guide til Vue.js at jeg hjalp til med å publisere! Boken dekker mange fasetter av Vue inkludert, men ikke begrenset til ruting, enkel statlig styring, form håndtering, Vuex, server utholdenhet, og testing. Hvis du er interessert, kan du få mer informasjon fra vår nettside, https://fullstack.io/vue.