Listan Rendering och Vue ‘ s v-Direktiv

0
14

Listan rendering är en av de vanligaste metoderna inom front-end webbutveckling. Dynamisk lista rendering används ofta för att presentera en serie på samma sätt grupperade information på ett koncist och vänligt format för användaren. I nästan varje webbapplikation vi använder, vi kan se listor av innehåll på många ställen i appen.

I denna artikel kommer vi att samla en förståelse av Vue ‘ s v-direktiv för att skapa dynamiska listor, samt gå igenom några exempel på varför de viktigaste attributet ska användas när man gör så.

Eftersom vi kommer att förklara saker grundligt som vi börjar med att skriva kod, denna artikel förutsätter att du kommer att ha ingen eller mycket liten kunskap med Vue (och/eller andra JavaScript-ramverk).

Fallstudie:

Vi kommer att använda som fallstudie för denna artikel.

När du är inloggad och i största indexet rutt vi är presenterad med en vy som liknar detta:

På hemsidan, vi har blivit vana vid att se en lista av trender, en lista med tweets, en lista av potentiella anhängare, etc. Det innehåll som visas i dessa listor beror på en mängd faktorer—vår historia, som vi följer, våra sympatier, etc. Som ett resultat kan vi säga att alla dessa uppgifter är dynamisk.

Även om dessa data är dynamiskt erhålls, hur visas dessa data är fortfarande den samma. Detta beror delvis på att använda återanvändbara web components.

Till exempel, vi kan se listan med tweets som en lista av enda tweet-komponent objekt. Vi kan tänka på tweet-komponent som ett skal som krävs data av olika slag, såsom användarnamn, handtag, tweet och avatar, bland andra bitar, och som helt enkelt visar dessa bitar på ett konsekvent markering.

Låt oss säga att vi ville göra en lista av komponenter (exempelvis en lista över tweet-komponent objekt) som bygger på en stor källa till uppgifter som erhållits från en server. I Vue, det första som kommer att tänka på för att åstadkomma detta är den v- direktiv.

V-direktiv för

V-direktiv används för att göra en lista över objekt som baseras på en datakälla. Direktivet kan användas på en mall element och kräver en speciell syntax längs rader:

Låt oss se ett exempel på detta i praktiken. För det första, vi ska anta att vi har redan fått en samling av tweet uppgifter:

const tweets = [
{
id: 1,
namn: “James’,
handtag: ‘@jokerjames’,
img: ‘https://semantic-ui.com/images/avatar2/large/matthew.png’,
tweet: “Om du inte lyckas, damm dig av och försök igen.”,
gillar: 10,
},
{
id: 2,
namn: Fatima’,
handtag: ‘@fantasticfatima’,
img: ‘https://semantic-ui.com/images/avatar2/large/molly.png’,
tweet: “Bättre sent än aldrig, men aldrig för sent är bättre.’,
gillar: 12,
},
{
id: 3,
namn: ‘Xin’,
handtag: ‘@xeroxin’,
img: ‘https://semantic-ui.com/images/avatar2/large/elyse.png’,
tweet: “Skönhet i kampen, fulheten i framgång.’,
gillar: 18,
}
]

tweets är en samling av tweet objekt med varje tweet som innehåller information om just tweet—en unik identifierare, namn/handle av konto, tweet-meddelande, etc. Låt oss nu försöka att använda v-direktiv för att göra en lista över tweet komponenter baserade på denna data.

Först och främst ska vi skapa Vue exempel—i hjärtat av den Vue ansökan. Vi kommer att montera/fästa våra exempel på ett DOM-element med id-app och tilldela tweets insamling som en del av den instans data objekt.

nya Vue({
el: ‘#app”,
uppgifter: {
tweets
}
});

Vi ska nu gå vidare och skapa en tweet-komponent som vår v-direktiv kommer att använda för att göra en lista. Vi kommer att använda global Vue.komponent konstruktor för att skapa en komponent som heter tweet-komponenten:

Vue.komponent(‘tweet-komponent’, {
mall: `
<div class=”tweet”>
<div class=”box”>
<artikeln class=”media” ->
<div class=”media-left”>
<figur class=”image är-64×64″>
<img :src=”tweet.img alt=”Image”>
</bild>
</div>
<div class=”media-content”>
<div class=”content”>
<p>
<strong>{{tweet.name}}</strong> <small>{{tweet.hantera}}</small>
<br>
{{tweet.tweet}}
</p>
</div>
<div class=”level-left”>
<a class=”level-post”>
<span class=”icon är-small”><div class=”fas fa-hjärta”></i></span>
<span class=”gillar”>{{tweet.gillar}}</span>
</a>
</div>
</div>
</article>
</div>
</div>
`,
rekvisita: {
tweet: Object
}
});

Ett par intressanta saker att notera här.

  1. Tweet-komponent förväntar sig en tweet objekt prop sett i prop validering krav (rekvisita: {tweet: Objekt}). Om komponenten är utförda med en tweet prop det är inte ett objekt, Vue kommer att avge varningar.
  2. Vi är bindande egenskaper tweet objekt prop på att komponenten mall med hjälp av Mustasch syntax: {{ }}.
  3. Komponenten markup anpassar sig Bulma s Box element som utgör en bra likhet med en tweet.

I HTML-mallen, vi måste skapa markeringar om våra Vue app kommer att vara monterad (dvs elementet med id på app). Inom denna kod vi ska använda v-direktiv för att göra en lista med tweets. Eftersom tweets är den datainsamling vi kommer att gå över, tweet kommer att vara en lämplig alias för att använda i direktivet. I varje utförda tweet-komponent, vi ska också passera i vm tweet objekt som rekvisita för att det ska öppnas i komponenten.

<div id=”app” class=”kolumner”>
<div class=”kolumn”>
<tweet-del v-for=”tweet i tweets” :tweet=”tweet”/>
</div>
</div>

Oavsett hur många fler tweet föremål skulle vara infört till insamlingen; eller hur de kommer att förändras över tiden—vårt ställa upp kommer alltid att göra alla tweets i samlingen i samma markeringar som vi förväntar oss.

Med hjälp av några egna CSS, vår app kommer att se något liknande detta:

Se Pennan Enkelt Flöde #1 av Hassan Dj (@itslit) på CodePen.

Om allt fungerar som förväntat, vi kan få en Vue tips i vår webbläsare konsolen:

[Vue tips]: <tweet-del v-for=”tweet i tweets”> komponent-listor som visas med v-bör ha ett uttryckligt nycklar…

Du kanske inte kan se varningen i webbläsaren konsolen när den är igång koden genom CodePen.

Varför är Vue talar om för oss att ange explicit nycklar i vår lista när allt fungerar som förväntat?

nyckel

Det är vanligt att ange en viktig egenskap för varje upprepad element inom en renderad v-lista. Detta beror på att Vue använder den viktigaste egenskapen för att skapa unika bindningar för varje nod: s identitet.

Låt oss förklara detta lite mer—om det fanns några dynamiska ändringar i ANVÄNDARGRÄNSSNITTET till vår lista (exempelvis beställning av en lista med objekt får blandas), Vue kommer att välja för att förändra data inom varje element i stället för att flytta DOM-element med detta. Detta kommer inte att vara ett problem i de flesta fall. Dock, i vissa fall där våra v-för-listan beror på DOM stat och/eller barn komponent stat, detta kan orsaka vissa oönskade beteende.

Låt oss se ett exempel på detta. Vad händer om vår enkla tweet komponent som nu finns ett fält som kommer att tillåta användare att direkt svara på tweet-meddelande? Vi kommer att ignorera hur detta svar kunde lämnas in och helt enkelt ta itu med de nya inmatningsfält för sig själv:

Vi kommer att innehålla det nya fältet på att mallen för tweet-komponenten:

Vue.komponent(‘tweet-komponent’, {
mall: `
<div class=”tweet”>
<div class=”box”>
// …
</div>
<div class=”control har-ikoner-vänster-ikoner-right”>
<input class=”ingång är-liten” platshållare=”Tweet dina svar…” />
<span class=”icon är liten är-left”>
<div class=”fas fa-kuvert”></i>
</span>
</div>
</div>
`,
rekvisita: {
tweet: Object
}
});

Antag att vi ville införa en ny funktion till vår app. Denna funktion skulle innebära att låta användaren att blanda en lista med tweets slumpmässigt.

För att göra detta, kan vi först har en “Shuffle!” – knappen i våra HTML-mall:

<div id=”app” class=”kolumner”>
<div class=”kolumn”>
<knappen class=”är den primära knappen” @klicka=”shuffle”>Shuffle!</knappen> >
<tweet-del v-for=”tweet i tweets” :tweet=”tweet”/>
</div>
</div>

Vi har bifogat en click-händelse lyssnaren på knappen element för att ringa en shuffle metod när den utlöses. I vår Vue exempel: vi ska skapa blanda metod som ansvarar slumpmässigt blanda tweets samling i hand. Vi kommer att använda lodash är _shuffle metod för att uppnå detta:

nya Vue({
el: ‘#app”,
uppgifter: {
tweets
},
metoder: {
blanda() {
detta.tweets = _.shuffle(det här.tweets)
}
}
});

Låt oss prova det! Om vi klickar blanda ett par gånger; vi kommer att märka våra tweet element få slumpmässigt blandade med varje klick.

Se Pennan Enkelt Flöde #2 av Hassan Dj (@itslit) på CodePen.

Men om vi typ lite information i ingången av varje komponent och klicka sedan på blanda, vi kommer att märka något konstigt som händer:

Eftersom vi inte valt att använda den viktiga attribut, Vue har inte skapat unika bindningar till varje tweet nod. Som ett resultat, när vi är som syftar till att ordna tweets, Vue tar mer prestanda spara strategi för att helt enkelt ändra (eller plåster) data i varje element. Eftersom det tillfälliga DOM staten (dvs den inmatade texten) är på plats, vi upplever detta oavsiktliga obalans.

Här är ett diagram som visar oss de uppgifter som får lagas på varje element och DOM tillstånd som kvarstår:

För att undvika detta, kommer vi att tilldela en unik nyckel för varje tweet-komponent som visas i listan. Vi kommer att använda id: t för en tweet för att vara unik identifierare eftersom vi måste säga en tweet id bör inte vara samma som för annan. Eftersom vi använder dynamiska värden som vi kommer att använda v-bind direktiv att binda vår nyckel till den tweet.id:

<div id=”app” class=”kolumner”>
<div class=”kolumn”>
<knappen class=”är den primära knappen” @klicka=”shuffle”>Shuffle!</knappen> >
<tweet-del v-for=”tweet i tweets” :tweet=”tweet” :key=”tweet.id” />
</div>
</div>

Nu, Vue erkänner varje tweet node identitet, och därmed kommer att ändra ordningen på de komponenter när vi tänker på blanda listan.

Eftersom varje tweet komponent är nu flyttas därför kan vi ta detta ett steg längre och använda Vue övergång-grupp för att visa hur elementen håller på att ordnas.

För att göra detta, kommer vi lägga till övergången-gruppen element som ett omslag till v-lista. Vi kommer att ange en övergång namn av tweets och förklara att övergången grupp ska registreras som ett div-element.

<div id=”app” class=”kolumner”>
<div class=”kolumn”>
<knappen class=”är den primära knappen” @klicka=”shuffle”>Shuffle!</knappen> >
<övergång-gruppen namn=”tweets” tag=”p”>
<tweet-del v-for=”tweet i tweets” :tweet=”tweet” :key=”tweet.id” />
</övergång-grupp>
</div>
</div>

Baserat på namnet på övergången, Vue kommer automatiskt att känna igen om någon CSS övergångar, animationer har angivits. Eftersom vi strävar efter att åberopa en övergång för förflyttning av objekt i listan; Vue kommer att leta efter en viss CSS övergången längs rader av tweets-flytta (där tweets är namnet på vår övergång grupp). Som ett resultat, kommer vi att manuellt införa en .tweets-flytta-klass som har en viss typ och tidpunkt för övergång:

#app .tweets-flytta {
övergången till: omvandla 1s;
}

Detta är en mycket kort titt in tillämpa lista övergångar. Se till att kolla in de Vue docs för detaljerad information om alla olika typer av förändringar som kan tillämpas!

Vår tweet-beståndsdelarna kommer nu att övergången lämpligt sätt mellan platser när en shuffle åberopas. Ge det ett försök! Skriv lite information i inmatningsfälten och klicka på “Shuffle!” ett par gånger.

Se Pennan Enkelt Flöde #3 av Hassan Dj (@itslit) på CodePen.

Ganska cool, eller hur? Utan den viktigaste egenskapen, övergången-gruppen element kan inte användas för att skapa listan övergångar eftersom de delar lagas på plats istället för att vara ordnat.

Bör det viktigaste attributet alltid användas? Det rekommenderas. De Vue dokument anges att de viktigaste attribut bör endast utgå om:

  • Vi avsiktligt vill ha standard slags lapp element i stället för prestandaskäl.
  • DOM innehållet är enkel nog.

Slutsats

Och där har vi det! Förhoppningsvis denna korta artikel skildras hur användbar v-direktiv är liksom förutsatt lite mer bakgrund till varför de viktigaste attributet används ofta. Låt mig veta om du har några frågor/tankar som helst!

Om du gillade min stil att skriva och är eventuellt intresserad av att lära dig att bygga appar med Vue.js kanske du gillar boken Fullstack Vue: Den Kompletta Guiden till Vue.js som jag hjälpt till att publicera! Boken täcker många aspekter av Vue inklusive men inte begränsat till-routing, enkel statlig förvaltning, form hantering, Vuex, server uthållighet, och testning. Om du är intresserad, kan du få mer information från vår hemsida, https://fullstack.io/vue.