Vue.js er en mikro JavaScript ramme for at skabe genanvendelige og reaktive komponenter på dit websted.
Front-end rammer varierer meget i både størrelse og omfang, hvor Vue.js skiller sig ud, er i sit minimale design og fokuserer på tilpasningsevne. Du har valget om at opbygge hele dit websted ved hjælp af Vue.js, bare et gør et enkelt element af dit websted reaktivt eller noget i mellem. På grund af dette er den meget tilgængelig med en lav lærekurve.
I denne artikel vil vi se på hovedkomponenterne i Vue.js og hvordan man får opsætning og start, men først lad os se på, hvornår du vil bruge en front-end-ramme som Vue.js og hvorfor .
Front-end rammer, som de fleste rammer kommer til abstrakte fælles opgaver, den fællesnævner du finder mellem projekter. Vue.js kommer specifikt til at abstrakte processen med at oprette HTML-komponenter, der opdateres dynamisk via JavaScript.
Nogle af de smertepunkter, som Vue.js løser for dig, genererer den dynamiske HTML, binder HTML-elementernes handlinger til din datalagring, omfang og kontekst og holder øje med, hvornår HTML'en skal genudføres automatisk.
Lad os f.eks. Sige, at du har en side, hvor du har en dynamisk liste over navne. Du kan have skrevet kode, der ser sådan ud:
Når du opbygger HTML manuelt - udover at koden hurtigt bliver svært at håndtere i større eksempler - er der ingen reel forbindelse mellem dataene og den genererede HTML. Hvis antallet af navne ændres, skal du være opmærksom på det og genoprette listen. Alt dette er også for kun at vise dynamiske data, hvis du vil tilføje hændelseshåndteringshandlinger som en on-klik-håndterer, for at spare på plads, vil du fortsætte med at neste din kode længere og længere i:
Med Vue.js adskiller du HTML som en skabelon, der viser, hvad du skal generere baseret på de givne data, og Vue.js vil gøre det automatisk.
Dette samme eksempel i Vue.js ville se ud som følger:
Vi har fuld adskillelse mellem HTML-kendetegnene ved JavaScript-koden til logikken i JavaScript-koden, hvilket gør alt selvstændigt og meget mere håndterbart. Vi bliver lidt foran os selv, men lad os tage et skridt tilbage og se på, hvordan kernen i Vue.js opnår dette ...
Kernen i Vue.js definerer du en sammenhæng mellem din HTML og nogle data, og når dataene ændres, opdateres HTML'en. Den måde, hvorpå dette virker, er, når du instanserer en Vue.js-komponent, du overfører den nogle data i form af et JavaScript-objekt, ændres dette objekt derefter til at erstatte dets egenskaber med sporbar getter og setter-metoder.
Vue.js analyserer dataobjektet, mens du konstruerer HTML'en og ser, hvilke data du brugte i rækkefølge for at gøre de forskellige HTML-elementer inde. Ved hjælp af dette overvåger det for ændringer, der er foretaget til dataobjektet, og ved præcis, hvad du skal opdatere og hvornår.
At have en så tæt binding mellem dataene og visningen forenkler udviklingen af front-end applikationer drastisk og minimerer fejl på grund af forkert fremstilling. Denne adskillelse af bekymringer giver dig mulighed for at fokusere på logikken i din ansøgning uden at skulle håndtere opdatering af visningen overhovedet.
Installation til Vue.js er lige så simpelt som at inkludere biblioteket:
Nu som jeg nævnte en Vue.js app er sammensat af et dataobjekt og en HTML-skabelon, hvor embedene skal indlejres. Så for vores første app at se Vue.js i aktion kan vi tilføje til body :
Først definerer vi en div som vil være vores HTML skabelon til vores Vue.js app. Inde bruger vi dobbeltbøjlerne til datainterpolation i HTML'en.
Inde i selve Vue.js app definerer vi simpelthen dataene og forbinder div som elementet for appen til at gøre både til og bruge som skabelon. Derefter øger vi tællervariablen på vores app en gang pr. Sekund for ekstra blænding.
Det er alt, hvad der er for at oprette en Vue.js applikation, åbner dette i din browser, og du vil se siden automatisk opdateringer hver gang vi opdaterer dataegenskaben.
Nu i de fleste applikationer, hvor DOM reagerer på de data, der ændres, er kun halvdelen af historien, skal du også have en måde at opdatere dataene på. Vue.js tager sig af dette med hændelser og metoder. Metoder er gemte funktioner, der kører i forbindelse med din Vue.js-app.
Lad os opdatere vores tællereksempel for at tilføje evnen til at starte og stoppe timeren i stedet for at den bare kører:
I HTML-skabelonen tilføjede vi en knap for at starte og stoppe tælleren. For at opnå dette har vi brug for teksten på knappen for at være dynamisk, og vi har brug for en hændelseshåndterer, når knappen klikkes.
For at erklære en begivenhed i Vue.js på et element, prefixer du navnet på eventuelle standard HTML DOM events med v-on: , så mouseover begivenhed bliver v-on:mouseover eller den keyup begivenhed bliver v-on:keyup . I vores eksempel bruger vi v-on:click attribut til at håndtere click begivenhed.
Noget du måske har bemærket er, at for knappens tekst kalder vi en metode i stedet for blot at henvise til en gemt ejendom. I mange situationer er de data, du gemmer, ikke nødvendigvis i det format, du vil vise det på siden. Metoder kan bruges her til at behandle dataene, og al den reaktivitet, du får fra egenskaber, gælder, når du bruger metoder, hvis de underliggende data ændrer skabelonen, opdateres i overensstemmelse hermed.
I Vue.js-appen har vi nu en ny ejendom, der indeholder timerenvariablen og nogle metoder. Det toggle metode, der er bundet til knappens klikhændelse, kontrollerer om eller ej timer Egenskaben er indstillet, starter eller stopper timeren henholdsvis og counterAction Metoden bruges til at vise den korrekte handling i knappen, igen baseret på timeren variabel.
Da skiftmetoden ændrer timeregenskaben , og counterAction- metoden - som er i Vue.js-skabelonen - bruger timeregenskaben, kaldes et hvilket som helst skift, skabelonen vil genoprette knappens tekst.
Det er værd at bemærke, at selv om vi ikke har en startværdi for timeregenskaben, skal det stadig være erklæret, når vi opretter Vue.js-appen. Hvis du ikke erklærer ejendommen fra begyndelsen, vil ejendommen ikke være reaktiv og vil ikke medføre, at HTML'en genfrembringes, når den ændres.
I vores eksempel bliver visningen opdateret en gang i sekundet, mens timeren kører, og så en gang om sekunder bliver vores counterAction- metode også kaldet, når knappen genbruges. Vue.js lader os optimere dette ved at cache resultatet af en metode og kun kalde op om metoden, hvis de underliggende data, der specifikt anvendes i metoden, ændres. Dette er også nyttigt, hvis du bruger den samme beregnede egenskab på flere steder på siden, i stedet for at behandle værdien flere gange ved at cache værdien, kan du reducere en masse overhead.
Lad os opdatere eksemplet for at inkludere cachelagrede egenskaber:
Den væsentligste forskel foruden cachen er, at metoderne under computed refereres til som egenskaber i modsætning til metoder, så i HTML-skabelonen blev vi nødt til at fjerne parenteserne fra counterAction .