Vue.js är en mikro JavaScript-ram för att skapa återanvändbara och reaktiva komponenter på din webbplats.
Front-end-ramar varierar mycket i både storlek och omfattning, där Vue.js sticker ut är i sin minsta design och fokuserar på anpassningsförmåga. Du har valet att bygga hela din webbplats med hjälp av Vue.js, bara att göra ett enda element på din webbplats reaktivt eller något inblandat. På grund av detta är det mycket lättillgängligt med en grundlinje för inlärning.
I den här artikeln kommer vi att titta på kärnkomponenterna i Vue.js och hur du får installationen och började, men först låt oss ta en titt på när du vill använda en front-end-ram som Vue.js och varför .
Front-end-ramar, liksom de flesta ramar, kommer till abstrakta gemensamma uppgifter, den gemensamma nämnaren du hittar mellan projekt. Vue.js kommer specifikt att abstrahera processen att skapa HTML-komponenter som uppdateras dynamiskt via JavaScript.
Några av de smärtpunkter som Vue.js löser för dig, genererar den dynamiska HTML-filen, bindar HTML-elementens åtgärder till din datahållande omfattning och sammanhang och håller reda på när HTML-filen behöver återges automatiskt.
Låt oss till exempel säga att du har en sida där du har en dynamisk namnlista. Du kan ha skrivet kod som ser något ut så här:
När du bygger upp HTML manuellt, förutom att koden snabbt blir svår att hantera i större exempel, finns det ingen verklig koppling mellan data och den genererade HTML. Om namnet varierar måste du vara medveten om det och återställa listan. Allt detta är också för att bara visa dynamiska data, om du vill lägga till händelsehanterare som en on-click-hanterare, för att spara utrymme, kommer du att fortsätta att hålla din kod längre och längre i:
Med Vue.js separerar du HTML som en mall som visar vad du ska generera baserat på data som ges, och Vue.js gör det automatiskt.
Samma exempel i Vue.js skulle se ut som följer:
Vi har fullständig åtskillnad mellan JavaScript-koden för JavaScript-koden till logiken för JavaScript-koden, vilket gör allt självständigt och mycket mer hanterbart. Vi får lite framför oss men låt oss ta ett steg tillbaka och titta på hur kärnan i Vue.js uppnår detta ...
Kärnan i Vue.js definierar du en korrelation mellan din HTML och vissa data, och när data ändras uppdateras HTML-filen. Så här fungerar detta när du instanserar en Vue.js-komponent du skickar den lite data i form av ett JavaScript-objekt, så ändras det här objektet och ersätter dess egenskaper med trackable getter och setter-metoder.
Vue.js analyserar dataobjektet när man konstruerar HTML och ser vilken data du använde för att göra de olika HTML-elementen inuti. Med hjälp av detta övervakas det för ändringar gjorda i dataobjektet och vet exakt vad som ska uppdateras och när.
Att ha en så snäv bindning mellan dataen och vyn förenklar utvecklingen av front-end-applikationerna drastiskt och minimerar fel på grund av felaktig representation. Med denna uppdelning av problem kan du fokusera på logiken i din ansökan utan att behöva hantera uppdateringen av visningen alls.
Installation för Vue.js är så enkelt som att inkludera biblioteket:
Nu som jag nämnde en Vue.js app består av ett dataobjekt och en HTML-mall för att bädda in data. Så för vår första app att se Vue.js i åtgärd kan vi lägga till body :
Först definierar vi en div vilken kommer att bli vår HTML-mall för vår Vue.js-app. Inuti använder vi dubbelhäftarna för datainterpolering i HTML.
Inne i själva Vue.js-appen definierar vi helt enkelt data och ansluter div som elementet för appen att både göra till och använda som mall. Därefter ökar vi räknevariabeln på vår app en gång per sekund för att lägga till flare.
Det är allt som finns att skapa en Vue.js-applikation, öppnar du den här i din webbläsare, så ser du sidan automatiskt uppdateringar varje gång vi uppdaterar dataegenskapen.
Nu i de flesta applikationer som har DOM att reagera på de data som ändras är bara hälften av historien, behöver du också ett sätt att uppdatera data, Vue.js tar hand om detta med händelser och metoder. Metoder är lagrade funktioner som körs i samband med din Vue.js-app.
Låt oss uppdatera vårt tellerexempel för att lägga till möjligheten att starta och stoppa timern istället för att den bara körs:
I HTML-mallen lade vi till en knapp för att starta och stoppa räknaren. För att uppnå detta behöver vi texten på knappen för att vara dynamisk och vi behöver en händelsehanterare för när knappen klickas.
För att deklarera en händelse i Vue.js på ett element prefixar du namnet på alla vanliga HTML DOM-händelser med v-on: , så mouseover händelsen blir v-on:mouseover eller den keyup händelsen blir v-on:keyup . I vårt exempel använder vi v-on:click attribut att hantera click händelse.
Något som du kanske har märkt är att för knappens text ringer vi en metod i stället för att bara referera till en lagrad egendom. I många situationer är data som du lagrar inte nödvändigtvis det format du vill visa på sidan. Metoder kan användas här för att bearbeta data, och all reaktivitet du får från egenskaper gäller när du använder metoder, om den underliggande data ändras mallen kommer att uppdateras i enlighet därmed.
I Vue.js-appen har vi nu en ny egenskap som innehåller timervariabeln och vissa metoder. De toggle Metod som är knuten till knappens klickhändelse kontrollerar huruvida eller inte timer egenskapen är inställd, startar eller stoppar timern respektive respektive counterAction Metoden används för att visa rätt åtgärd i knappen, igen baserat på timervariabeln.
Eftersom växelmetoden ändrar timeregenskapen och motåtvägningsmetoden -som ligger i Vue.js-mallen-använder timeregenskapen, kallas någon gång växla mallen återställer knappens text.
Det är värt att notera att även om vi inte har ett initialvärde för timeregenskapen , behöver det fortfarande deklareras när du skapar Vue.js-appen. Om du inte förklarar egenskapen från början kommer egenskapen inte att vara reaktiv och kommer inte att orsaka att HTML återges när den ändras.
I vårt exempel blir vyn uppdaterad en gång i sekund medan timern körs, och så en gång i sekret kommer även vår counterAction- metod att ringas när knappen repeteras. Vue.js låter oss optimera detta genom att cache resultatet av en metod och bara återkalla metoden om den underliggande data som används specifikt i metoden ändras. Det här är också användbart om du använder samma beräknade egenskap på flera ställen på sidan, istället för att bearbeta värdet flera gånger, genom att cachera värdet, kan du minska mycket omkostnader.
Låt oss uppdatera exemplet för att inkludera cachade egenskaper:
Huvudskillnaden förutom för cachningen är de metoderna under computed refereras till som egenskaper i motsats till metoder, så i HTML-mallen var vi tvungna att ta bort parenteserna från counterAction .