Lijst weergave en Vue de v-Richtlijn voor

0
42

Lijst weergave is één van de meest gebruikte praktijken in front-end web development. Dynamische lijst rendering wordt vaak gebruikt om een reeks op dezelfde manier gegroepeerd informatie in een beknopte en vriendelijk formaat aan de gebruiker. In bijna elke web applicatie die we gebruiken, kunnen we een lijst zien van de inhoud in tal van gebieden van de app.

In dit artikel gaan we verzamelen een begrip van de Vue is de v-richtlijn in het dynamisch genereren van lijsten, en gaan door middel van een aantal voorbeelden waarom de belangrijkste eigenschap die moet worden gebruikt bij het doen.

Sinds we zullen het uitleggen van dingen grondig als we beginnen met het schrijven van code, in dit artikel wordt ervan uitgegaan dat u zult hebben geen of zeer weinig kennis met Vue (en/of andere JavaScript-frameworks).

Case Study:

We gaan gebruiken als case study voor dit artikel.

Als u ingelogd bent en in de main index route van we geconfronteerd met een uitzicht vergelijkbaar met dit:

Op de homepage hebben we gewend geraakt aan het zien van een lijst van trends, een lijst van tweets, een lijst van potentiële volgelingen, enz. De inhoud wordt weergegeven in deze lijsten is afhankelijk van een veelheid van factoren—onze geschiedenis, die wij volgen, onze wil, enz. Als gevolg hiervan kunnen we zeggen dat al deze gegevens is dynamisch.

Al deze gegevens dynamisch kan worden verkregen, op welke wijze deze informatie wordt weergegeven blijft hetzelfde. Dit is gedeeltelijk te wijten aan het gebruik van herbruikbare web components.

Bijvoorbeeld; we zien de lijst van tweets als een lijst met één tweet-items. We kunnen denken aan het tweet-component als een schelp die neemt de gegevens van soorten, zoals de gebruikersnaam, het handvat, tweet en avatar, onder andere stukken, en dat geeft die stukken in een consistente opmaak.

Laten we zeggen dat we wilden maken van een lijst van onderdelen (bijv. een lijst van de tweet-items), gebaseerd op een grote gegevensbron verkregen van een server. In Vue, het eerste ding dat moet komen voor de geest om dit te bereiken is de v-voor de richtlijn.

De v-richtlijn voor

De v-richtlijn wordt gebruikt voor het weergeven van een lijst van de items is gebaseerd op een gegevensbron. De richtlijn kan worden gebruikt op een sjabloon element en vereist een specifieke syntaxis langs de lijnen van:

Laten we een voorbeeld zien van dit in de praktijk. Eerst zullen we aannemen dat we al hebben verkregen van een verzameling van tweet gegevens:

const tweets = [
{
id: 1,
naam: ‘James’,
handvat: ‘@jokerjames’,
img: ‘https://semantic-ui.com/images/avatar2/large/matthew.png’,
tweet: “Als het je niet lukt, stof jezelf af en probeer het opnieuw.”,
houdt van: 10,
},
{
id: 2,
naam: ‘Fatima’,
handvat: ‘@fantasticfatima’,
img: ‘https://semantic-ui.com/images/avatar2/large/molly.png’,
tweet: ‘Beter laat dan nooit, maar nooit te laat is beter.’,
houdt van: 12,
},
{
id: 3,
naam: ‘Xin’,
handvat: ‘@xeroxin’,
img: ‘https://semantic-ui.com/images/avatar2/large/elyse.png’,
tweet: ‘Schoonheid in de strijd, lelijkheid in het succes.’,
houdt van: 18,
}
]

tweets is een verzameling van de tweet objecten met elke tweet met daarin de details van een bepaalde tweet—een unieke identificator, wordt de naam/gebruikersnaam van de account een tweet-bericht, etc. Laten we nu proberen om het gebruik van de v-voor de richtlijn tot het weergeven van een lijst van tweet componenten op basis van deze gegevens.

Eerst en vooral maken we de Vue aanleg—het hart van de Vue toepassing. We mount/attach onze exemplaar naar een DOM-element van id-app en het toewijzen van de tweets verzamelen als onderdeel van de aanleg van data-object.

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

We zullen nu ga je gang en maak een tweet-onderdeel dat onze v-richtlijn zal gebruik te maken van een lijst. We zullen gebruik maken van de global Vue.onderdeel constructor maakt een component genaamd tweet-component:

Vue.component(‘tweet-component’, {
sjabloon: `
<div class=”tweet”>
<div class=”box”>
<article class=”media”>
<div class=”media-left”>
<figure class=”image-64 x 64″>
<img :src=”tweet.img alt=”Image”>
</figure>
</div>
<div class=”media-content”>
<div class=”content”>
<p>
<strong>{{tweet.naam}}</strong> <small>{{tweet.handvat}}</small>
<br>
{{tweet.tweet}}
</p>
</div>
<div class=”nivo-left”>
<a class=”nivo-item”>
<span class=”icon-small”><i class=”fas fa-hart’ ></i></span>
<span class=”likes”>{{tweet.graag}}</span>
</een>
</div>
</div>
</article>
</div>
</div>
`,
rekwisieten: {
tweet: Object
}
});

Een paar interessante dingen op te merken hier.

  1. De tweet-component verwacht een tweet object prop zoals te zien is in de prop validatie eis (props: {tweet: Object}). Als de component is weergegeven met een tweet prop dat is niet een object, Vue zal uitstoten waarschuwingen.
  2. We binden de eigenschappen van de tweet object prop op de component-sjabloon met de hulp van de Snor syntaxis: {{ }}.
  3. Het onderdeel opmaak zich aanpast Bulma ‘ s Box element: het geeft een goede gelijkenis met een tweet.

In de HTML-sjabloon, moeten we het maken van de markup waar onze Vue-app zal worden gemonteerd (dat wil zeggen het element met de id van de app). Binnen deze opmaak, zullen we gebruik maken van de v-richtlijn in te zetten om een lijst met tweets. Sinds tweets is het verzamelen van de gegevens zullen we itereren over, tweet een adequaat alias te gebruiken in de richtlijn. In elk weergegeven tweet-component, zullen we ook pas in de geitereerde tweet object als rekwisieten voor het om toegankelijk te zijn in de component.

<div id=”app” class=”kolommen”>
<div class=”kolom”>
<tweet-component v-for=”tweet in tweets” :tweet=”tweet”/>
</div>
</div>

Ongeacht hoe veel meer tweet objecten zou worden ingevoerd om de collectie; of hoe ze veranderen in de tijd—onze set-up zal altijd maken alle tweets in de collectie in dezelfde markup we verwachten.

Met de hulp van een aantal custom CSS, onze app zal er als volgt uitzien:

Zie de Pen Eenvoudig Feed #1 door Hassan (Dj@itslit) op CodePen.

Hoewel alles werkt zoals verwacht, hebben we gevraagd met een Vue tip in onze browser console:

[Vue tip]: <tweet-component v-for=”tweet in tweets”>: component lijst weergegeven met v-voor moet hebben expliciete sleutels…

U mag niet in staat zijn om de waarschuwing in de browser console bij het uitvoeren van de code door CodePen.

Waarom is Vue ons te vertellen te geven expliciet toetsen in onze lijst wanneer alles werkt zoals je verwacht?

sleutel

Het is gebruikelijk om aan te geven een belangrijke eigenschap voor elke herhaald element binnen een gerenderde v-lijst. Dit is omdat Vue gebruikt de belangrijkste eigenschap die maken unieke bindingen voor elk knooppunt identiteit.

Laten we dit wat meer—als er geen dynamische UI wijzigingen aan onze lijst (bijv. volgorde van de items in de lijst wordt geschud), Vue zal kiezen in de richting van het veranderen van gegevens binnen elk element in plaats van het verplaatsen van de DOM-elementen aangepast. Dit zal niet een probleem in de meeste gevallen. Echter, in bepaalde gevallen, waar onze v-lijst hangt op de DOM staat en/of kind-component staat, kan dit leiden tot een aantal onbedoelde gedrag.

Laten we een voorbeeld zien van dit. Wat als onze simpele tweet-component wordt nu in een invoerveld dat stelt de gebruiker in staat om direct te reageren op de tweet-bericht? We negeren hoe deze reactie kan worden ingediend en gewoon adres van de nieuwe input veld zelf:

We zijn deze nieuwe invoer veld op om het sjabloon van de tweet-component:

Vue.component(‘tweet-component’, {
sjabloon: `
<div class=”tweet”>
<div class=”box”>
// …
</div>
<div class=”element heeft-pictogrammen-links-pictogrammen-right”>
<input class=”input-klein” placeholder=”Tweet je antwoord…” />
<span class=”icon is-klein-links”>
<i class=”fas fa-envelope”></i>
</span>
</div>
</div>
`,
rekwisieten: {
tweet: Object
}
});

Stel we wilden introduceren, een andere nieuwe functie die in onze app. Deze functie zou inhouden dat de gebruiker toe om de volgorde van een lijst van tweets willekeurig.

Om dit te doen; we kunnen eerst een “Shuffle” te klikken in onze HTML-sjabloon:

<div id=”app” class=”kolommen”>
<div class=”kolom”>
<button class=”is-primary knop” @klik=”shuffle”>Shuffle!</knop>
<tweet-component v-for=”tweet in tweets” :tweet=”tweet”/>
</div>
</div>

We hebben een click-event listener op de knop element om te bellen met een shuffle-methode wordt geactiveerd. In onze Vue-instantie: we maken van de “shuffle” – methode verantwoordelijk willekeurig door elkaar schudden van de tweets collectie in de aanleg. We gebruiken lodash de _shuffle methode om dit te bereiken:

nieuwe Vue({
el: ‘#app’,
data: {
tweets
},
methoden: {
shuffle() {
deze.tweets = _.shuffle(deze.tweets)
}
}
});

Laten we het eens proberen! Als we op shuffle een paar keer; we merken onze tweet elementen willekeurig geassorteerd met elke klik.

Zie de Pen Eenvoudig Feed #2 door Hassan (Dj@itslit) op CodePen.

Echter, als we voer de informatie in de ingang van elk onderdeel en klik vervolgens op shuffle; we ziet iets bijzonders gebeuren:

Omdat we niet voor gekozen om met behulp van de sleutel kenmerk, Vue heeft gemaakt unieke bindingen met het plaatsen van elke tweet knooppunt. Als gevolg hiervan, wanneer wij proberen om de volgorde van de tweets, Vue neemt de meer performante het opslaan van aanpak om gewoon te veranderen (of patch) de gegevens in van elk element. Sinds de tijdelijke DOM staat (d.w.z. de ingevoerde tekst) op zijn plaats blijft, dan ervaren we dit onbedoelde discrepantie.

Hier is een diagram dat toont ons de gegevens die worden gepatcht op elk element en de DOM staat, die blijft op zijn plaats:

Om dit te voorkomen; we hebben voor het toewijzen van een unieke sleutel om elke tweet-component weergegeven in de lijst. We zullen gebruik maken van de id van een tweet om de unieke identifier omdat we veilig zeggen dat een tweet id mag niet gelijk zijn aan die van een ander. Omdat we met behulp van dynamische waarden, gebruiken we de v-binden richtlijn te binden onze sleutel tot de tweet.id:

<div id=”app” class=”kolommen”>
<div class=”kolom”>
<button class=”is-primary knop” @klik=”shuffle”>Shuffle!</knop>
<tweet-component v-for=”tweet in tweets” :tweet=”tweet” :key=”tweet.id” />
</div>
</div>

Nu, Vue, herkent elke tweet knooppunt van de identiteit; en zo zal de volgorde van de onderdelen wanneer we van plan zijn op het schudden van de lijst.

Sinds het plaatsen van elke tweet component is nu verplaatst bijgevolg kunnen we een stap verder en gebruik Vue de transitie-groep om te laten zien hoe de elementen worden nabesteld.

Om dit te doen, voegen we de transitie-groep-element als een wrapper om de v-lijst. We geven een overgang naam van tweets en verklaren dat de overgang van de groep moet worden gerenderd als een div-element.

<div id=”app” class=”kolommen”>
<div class=”kolom”>
<button class=”is-primary knop” @klik=”shuffle”>Shuffle!</knop>
<overgang-group name=”tweets” tag=”div”>
<tweet-component v-for=”tweet in tweets” :tweet=”tweet” :key=”tweet.id” />
</transitie-groep>
</div>
</div>

Op basis van de naam van de overgang, Vue zal automatisch herkennen als een CSS-overgangen en animaties zijn opgegeven. Sinds wij streven ernaar om op te roepen een overgang voor de beweging van de items in de lijst; Vue zal kijken voor een bepaalde CSS-overgang langs de lijnen van tweets te verplaatsen (waar tweets is de naam die wordt gegeven aan onze overgang groep). Als een resultaat, zullen we handmatig invoeren .tweets verplaatsen klasse die een bepaald type en het tijdstip van de overgang:

#app .tweets verplaatsen {
overgang: de transformatie van 1s;
}

Dit is een zeer korte blik in het toepassen lijst overgangen. Controleer de Vue documenten voor gedetailleerde informatie over alle verschillende soorten van overgangen die kunnen worden toegepast!

Onze tweet-onderdelen zullen nu de overgang de juiste wijze tussen de locaties als er een shuffle is ingeroepen. Geef het een keer te proberen! Voer de informatie in de invoervelden in en klik op “Shuffle!” een paar keer.

Zie de Pen Eenvoudig Feed #3 door Hassan (Dj@itslit) op CodePen.

Pretty cool, toch? Zonder de sleutel kenmerk van de transitie-groep-element kan niet worden gebruikt voor het maken van een lijst overgangen sinds de elementen worden hersteld, in plaats van te worden nabesteld.

Moet de belangrijkste eigenschap altijd worden gebruikt? Het is aanbevolen. De Vue documenten geven aan dat de belangrijkste eigenschap die alleen mag worden weggelaten indien:

  • Wij hebben er bewust wil de standaard manier van het patchen van elementen in de plaats voor performance redenen.
  • De DOM van content is eenvoudig genoeg.

Conclusie

En daar hebben we het! Hopelijk is dit korte artikel afgebeeld hoe nuttig de v-richtlijn is en mits een beetje meer context aan waarom het belangrijk kenmerk is vaak gebruikt. Laat het me weten als u nog vragen/gedachten dan ook!

Als je graag mijn stijl van schrijven en zijn potentieel geïnteresseerd in het leren hoe om apps te bouwen met Vue.js je kan als het boek Fullstack Vue: De Complete Gids voor Vue.js dat ik geholpen publiceren! Het boek gaat in op tal van facetten van de Vue met inbegrip van, maar niet beperkt tot, de routing, eenvoudige state management, vorm hanteren, Vuex, server persistentie en testen. Als u geïnteresseerd bent, kunt u meer informatie van onze website, https://fullstack.io/vue.