Et fugleperspektiv Vue: hvordan man kommer i gang med Vue.js

Grib din kopi af CSS Visual Dictionary inkl. diagrammer over alle CSS-egenskaber.

Foto af Sam Bark på Unsplash

Du har altid ønsket at begynde at lære at kode i Vue-rammen, men på en eller anden måde har du bare ikke tid i din travle plan.

Måske føler du dig overvældet af alle biblioteker og rammer? Denne vejledning til fugleperspektiv (ved at komme i gang) kan muligvis hjælpe.

Ligesom React, deler Vue din JavaScript-applikation op i flere dele:

  • applikationsobjektet
  • medlemsmetoder og egenskaber
  • og den faktiske visning (det er her dine HTML-elementer er).

Vues v-baserede HTML-attributter

Vue tilføjer en masse tilpassede attributter til de elementer, du normalt ikke ser i standard HTML, ved at præfikse dem med v-.

For eksempel er der v-html, v-if, v-else og mange andre. De har alle deres specifikke formål: gengivelseselementer. Lad os se hurtigt.

Boolske switches

En anden attribut v-show er til at skifte elementer baseret på deres synlighedstilstand.

Dette er specificeret i en Vue-applikations ejendomsdata som {boolean: true;}.

Derefter kan du i din HTML bruge den til at bestemme, hvilke elementer der skal vises.

Hej!

Hver gang App.data.boolean er sandt, vil

-elementet være synligt.

Din applikationslogik kan nu 'skifte'

elementet 'til' eller 'slukket' i din kode. Ændringen gengives automatisk.

looping

Direktivet v-for er at oprette sløjfer til at liste HTML-elementer.

Dette betyder, at du kan integrere iteratorer direkte i HTML-elementer for at gengive lister over data, der er gemt i en matrix i tilstanden for din Vue-applikation. Du behøver ikke at skrive det samme HTML-element igen og igen.

Her er et klassisk eksempel på en for-loop iterator.

Forbered først dataene i dit applikationsobjekt:

lad E = ny Vue ({
     el: '#L', // link til id = "L" -elementet
   data : {
  varer: [
      {besked: 'En'},
      {besked: 'To'},
      {besked: 'Tre'}]}
});

Nu i din vigtigste HTML-applikationscontainer:

      
  • {{item.message}}

Direktivet v-for er i et 'for emne i poster' -format.

Dette betyder, at du opretter en ny variabel kaldet element i din {{... her ...}} -sløjfe. Egenskabsposterne kommer fra selve applikationsdataobjektet.

Dette vil gengive dine poster med JSON-objekter som HTML-elementer!

Det ville være det samme som at håndskrive følgende HTML:

      
  • Et   
  • To   
  • Tre

Jeg vil ikke gå nærmere ind på detaljerne bag hver eneste v-baserede attribut, og hvad det gør i denne tutorial. Men som du kan se, kan de være ganske nyttige.

Så hvordan bygger du faktisk Vue-applikationer med dette?

Bygningsapplikationer

Ved at kombinere dine applikationsstatsdata med disse oprindelige v-baserede attributter opretter du tilknytninger mellem din logik og applikationsvisningens gengivelse.

Dette forkorter din JavaScript-applikation og sparer båndbredde (især på store apps). Det hjælper dig også med at få tingene gjort meget hurtigere.

I skærmbilledet nedenfor er applikationsstilladset, hvor alle dine tags og skabeloner vil blive gengivet til.

Dette fungerer meget som React. Vue behandler din vigtigste applikation

som beholderen til hele appen. Det gemmer egenskaber og metoder i applikationsobjektet (se nedenfor).

I skærmbilledet viser den blå linje, hvordan dine applikationsdata er bundet til HTML-elementerne, der viser visningen.

Den grønne linje forbinder dine metoder til begivenheder.

Bemærk den røde kontur på billedet ovenfor. I Vue skal du binde webadresser med: href og ikke href-attributten. Hvis du ikke gør det, fungerer linket ikke.

// Korrekt (bemærk den førende: før href attribut)
 {{url}} 
// Fejl (URl starter ikke)
 {{url}} 

Applikationsdata

Når du bygger applikationer i Vue (eller endda andre lignende rammer eller biblioteker), tænker du normalt på et primært lagerplads til dine data. I React kan det være den statsejendom. I Vue gemmes det simpelthen i dataobjektet.

I henhold til selve Vue-dokumentationen gemmes datalagring - ofte omtalt som kilden til sandhed - i egenskaben rå data på selve hovedapplikationsobjektet:

const sourceOfTruth = {}

const-applikation = ny Vue ({data: sourceOfTruth});

Den seje ting ved dette er, at du kan gemme en værdi i egenskaben data: {...} og få den automatisk tilgængelig i dine HTML-elementer via v-teksten, v-pre, v-once (gengives kun én gang) og v-kappe (vent indtil siden er gengivet og Vue er monteret) og mange andre attributter.

Med andre ord bliver egenskaber (primitive værdier, objekter og metoder) allestedsnærværende i hele applikationen og kan bruges i alle de ekstra funktioner, som Vue-rammen bringer til tabellen… til at blive brugt sammen med attributter, der starter med et v-præfiks.

Og bare en sidebesked. Hvis du undgår at bruge v-kappe, kan du opleve nogle gengivelse af artefakter. F.eks. Hopper CSS-stilen lige inden for det første sekund efter indlæsning af din app.

Vue-applikationsobjekt

Det er her du initialiserer dine data og skriver dine applikationsmetoder, der får tingene til.

Som du kan se, har du en række egenskaber og metoder - ligesom du ville gøre i en almindelig JavaScript-klasse.

Nedenfor er et skærmbillede, der viser dit vigtigste Vue-applikationsobjekt. Det er her du faktisk bygger logikken i din applikation og gemmer egenskaber, URL-strenge og tilpassede metoder. Det er som at adskille kodelogikken fra visningen.

Når du lige er kommet i gang, er det en god ide at få et indblik i fugleperspektivet over tingene, før du hopper lige ind i koden.

Da du ikke bare skriver koden i