Vue.js er et micro JavaScript-rammeverk for å lage gjenbrukbare og reaktive komponenter på nettstedet ditt.

Front-end-rammer varierer mye i både størrelse og omfang, hvor Vue.js skiller seg ut, er i minimal design og fokuserer på tilpasningsevne. Du har valget om å bygge hele nettstedet ditt ved hjelp av Vue.js, bare å gjøre et enkelt element av nettstedet ditt reaktivt, eller noe i mellom. På grunn av dette er det veldig tilnærmet med en grunnlærings kurve.

I denne artikkelen skal vi se på kjernekomponentene i Vue.js og hvordan du får oppsett og startet, men først la oss ta en titt på når du vil bruke en front-end ramme som Vue.js og hvorfor .

Hvorfor bruke en front-end ramme

Front-end rammer, som de fleste rammer kommer til abstrakte vanlige oppgaver, fellesnevneren du finner mellom prosjekter. Vue.js kommer spesielt til å abstrahere prosessen med å lage HTML-komponenter som dynamisk oppdateres gjennom JavaScript.

Noen av smertepoengene som Vue.js løser for deg, genererer den dynamiske HTML-en, binder HTML-elementene til dataene dine, og holder oversikt over når HTML-en må gjenopprettes automatisk.

For eksempel, la oss si at du har en side der du har en dynamisk liste over navn. Du kan ha skrevet kode som ser noe ut som dette:

Når du bygger HTML-koden manuelt, foruten at koden raskt blir vanskelig å administrere i større eksempler, er det ingen reell forbindelse mellom dataene og den genererte HTML-en. Hvis rekke navnene endres må du være oppmerksom på det og gjenta listen. Alt dette er også for bare å vise dynamiske data, hvis du vil legge til hendelseshåndteringsprogrammer som en på-klikkbehandler, for å spare på plass, vil du fortsette å neste koden ytterligere i:

Med Vue.js adskiller du HTML som en mal som viser hva du skal generere basert på dataene, og Vue.js gjør det automatisk.

Dette samme eksemplet i Vue.js ville se ut som følgende:

Vi har fullstendig separasjon mellom HTML-aspektene til JavaScript-koden til logikken til JavaScript-koden som gjør alt selvstendig og mye mer håndterbart. Vi får litt foran oss selv, la oss ta et skritt tilbake og se på hvordan kjernen i Vue.js oppnår dette ...

Datadrevet DOM

Kjernen til Vue.js definerer du en korrelasjon mellom HTML og noen data, og når dataene endres, oppdateres HTML-en. Måten dette virker på, er når du instantierer en Vue.js-komponent du sender den noen data i form av et JavaScript-objekt, blir dette objektet endret og erstattet egenskapene med sporbar getter og setter-metoder.

Vue.js analyserer dataobjektet mens du bygger HTML-en og ser hvilke data du brukte i rekkefølge for å gjengi de forskjellige HTML-elementene inne. Ved hjelp av dette overvåker det for endringer som er gjort i dataobjektet, og vet nøyaktig hva du skal oppdatere og når.

Å ha en så stram binding mellom dataene og visningen forenkler utviklingen av front-end-applikasjoner drastisk og minimerer feil som skyldes feilrepresentasjon. Denne adskillelsen av bekymringer lar deg fokusere på logikken i søknaden din uten å måtte håndtere visningen i det hele tatt.

Oppretter din første Vue.js-app

Installasjon for Vue.js er like enkelt som å inkludere biblioteket:

Nå som jeg nevnte en Vue.js app består av et dataobjekt og en HTML-mal der du skal legge inn dataene. Så for vår første app for å se Vue.js i handling kan vi legge til body :

Først definerer vi en div som vil være vår HTML-mal for vår Vue.js-app. Innvendig bruker vi dobbeltbøylene for datainterpolering i HTML.

I selve Vue.js-appen definerer vi bare dataene og kobler til div som elementet for appen til å gjengjøre og bruke som mal. Deretter øker vi tellevariabelen på appen vår en gang per sekund for ekstra bluss.

Det er alt som er å skape et Vue.js-program, åpner dette i nettleseren din. Du vil se siden automatisk oppdateres hver gang vi oppdaterer dataegenskapen.

Hendelser og metoder

Nå i de fleste applikasjoner som har DOM-reaksjonen på dataene som endres, er bare halvparten av historien, du trenger også en måte å oppdatere dataene, Vue.js tar vare på dette med hendelser og metoder. Metoder er lagrede funksjoner som kjøres i sammenheng med Vue.js-appen din.

La oss oppdatere vårt counter-eksempel for å legge til muligheten til å starte og stoppe timeren i stedet for at den bare kjører:

I HTML-malen har vi lagt til en knapp for å starte og stoppe disken. For å oppnå dette trenger vi teksten på knappen for å være dynamisk, og vi trenger en hendelseshåndterer for når knappen klikkes.

For å erklære en hendelse i Vue.js på et element, prefixer du navnet på noen vanlige HTML DOM hendelser med v-on: , så mouseover hendelsen blir v-on:mouseover eller keyup hendelsen blir v-on:keyup . I vårt eksempel bruker vi v-on:click attributt til å håndtere click begivenhet.

Noe du kanskje har lagt merke til er at for knappens tekst ringer vi en metode i motsetning til bare å referere til en lagret eiendom. I mange situasjoner er dataene du lagrer ikke nødvendigvis i formatet du vil vise det på siden. Metoder kan brukes her til å behandle dataene, og all reaktivitet du får fra egenskaper, gjelder når du bruker metoder, hvis de underliggende dataene endrer malen, oppdateres tilsvarende.

I Vue.js-appen har vi nå en ny eiendom som holder tidsurvariabelen, og noen metoder. De toggle metode som er bundet til knappens klikkhendelse, sjekker om eller ikke timer Egenskapen er satt, starter eller stopper timeren henholdsvis og counterAction Metode brukes til å vise riktig handling i knappen, igjen basert på tidsvariabelen.

Siden byttemetoden endrer tidsinnstillingsegenskapen , og counterAction- metoden - som er i Vue.js-malen - bruker timeren-egenskapen, kalles et hvilket som helst tidspunkt veksle, malen vil gjengjøre knappens tekst.

Det er verdt å merke seg at selv om vi ikke har en innledende verdi for timeren , må den fortsatt bli erklært når du lager Vue.js-appen. Hvis du ikke erklærer eiendommen fra begynnelsen, vil eiendommen ikke være reaktiv og vil ikke føre til at HTML-filen gjengis når den endres.

I vårt eksempel blir visningen oppdatert en gang i sekundet mens tidtakeren kjører, og så en gang i sekundet vil også vår counterAction- metode bli kalt når knappen blir revet. Vue.js lar oss optimalisere dette ved å cache resultatet av en metode og bare tilbakekalle metoden dersom de underliggende dataene som brukes spesifikt i metoden, endres. Dette er også nyttig hvis du bruker den samme beregnede egenskapen på flere steder på siden, i stedet for å behandle verdien flere ganger, ved å cache verdien, kan du redusere mye overhead.

La oss oppdatere eksemplet for å inkludere hurtigbufrede egenskaper:

Hovedforskjellen i tillegg til caching, er de metodene under computed refereres til som egenskaper i motsetning til metoder, så i HTML-malen måtte vi fjerne parentesene fra counterAction .