I introduksjonsposten for denne serien snakket vi litt om hvordan webdesignere kan ha fordel ved å bruke Vue. I denne opplæringen lærer vi hvordan du får Vue oppe, mens du svarer på noen innledende spørsmål du måtte ha.

Slik legger du til Vue til prosjektet ditt

Vue er bare JavaScript, noe som betyr at du kan laste den ved å inkludere et skript i HTML-dokumentet ditt. Vue nettsted anbefaler å bruke en CDN som https://cdn.jsdelivr.net/npm/vue for å være sikker på å få den nyeste versjonen. Du kan også bruke andre versjonsspesifikke linker som https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js.

Merk: Hvis du oppretter en produksjonsapp, anbefales det at du bruker en pakkeregulator som garn å administrere alle dine avhengigheter, og distribuere til CDN-drevne steder. Dette er spesielt viktig hvis du vil bygge Vue i JavaScript-pakken, for eksempel ved å bruke noe som Webpack. 

Forstå merking og maler

Når du lager et Vue-eksempel, kan du bruke el alternativet i konfigurasjonsobjektet for å koble forekomsten din til DOM. De el alternativet bør være enten et element eller en CSS velg streng. Dette elementet kan også inneholde malkode. Så, i HTML-siden din, kan du ha noe slikt:

 
tittel
 
innhold
 

Og så i JavaScript, ville du ha noe slikt:

var app = ny Vue (el: "#app", data: title: "Threat Level Midnight", innhold: "AGENT MICHAEL SCARN, veldig kjekk uten å prøve, slapper av ved skrivebordet hans, føtter opp, vurderer en saksfil . Hans pistolstenger ved siden av FBI-merket hans, som glitter i kontrastets lysende floriserende lys. Kledd i en dress, løsnet han slipset og slettet noen knapper og avslørte hans hårete bryst. ",)

Igjen, merk at "#App" streng refererer til div i HTML-koden. Vue vil erstatte det indre innholdet i den diven med resultatet av Vues gjengivelsestrinn.

Hva Vue gjør i bakgrunnen

Vi har oppdaget at Vue tillater oss å skille vårt syn fra våre data. Noen logikk kan utføres i selve visningen, men vi kan unngå følgende mønstre som fører til dårlig kode eller feil tilstand:

• Lagring / lesing av data i DOM
• Oppdaterer DOM ved hjelp av direkte DOM-manipulering og modifikasjon i stedet for malgengivelse
• Bruk prosessormetoder til å evaluere tilstand på uensartede måter som ofte fører til en DOM-representasjon som ikke samsvarer med den tiltenkte tilstanden

Så hvordan fungerer dette?

Vue lar deg sette inn informasjon i data alternativ. Et hvilket som helst nøkkelverdierpar som passerer innsiden av dette objektet, vil bli observert for endringer, og alt avhengig av datatykket vil være re-gjengitte når dataene endres.

Dette betyr i hovedsak at data objektet er reaktiv. Hvis du bruker JavaScripts innebygde datamanipuleringsmetoder, vil endringen utløse Vues reneringsmotor for å gjøre sin magi.

For eksempel, hvis dataobjektet ditt er konfigurert slik:

var vm = ny Vue (el: "#app", data: items: []);

Med denne malekoden:

 
Item.text
 

Og senere legger du til noen elementer, slik som dette:

vm.items = [text: "Diversity Day", text: "Beach Trip"]

Malen ville automatisk gjenopprette, iterere (looping over) elementene som ble satt.

Viktig advarsel for reaktivitet

Som JavaScript-funksjonen som tillater Vue å se på data objekt (gjenstandstere og settere) gir ikke informasjon når nye nøkler legges til eller eksisterende nøkler blir fjernet, ikke legge til og fjerne nøkler utløser ikke gjenoppretting. Så, i det samme eksemplet ovenfor, hvis den opprinnelige dataobjektet er tomt (elementer: [] er ikke til stede):

var vm = ny Vue (el: "#app", data: )

Enhver endring til vm.items vil ikke utløse en gjengivelse. Fra Vue-dokumentasjonen: 

"Vue tillater ikke dynamisk å legge til nye rotasjonsnivåreaktive egenskaper til en allerede opprettet forekomst."

I tillegg er det viktig å merke seg at når du legger til elementer i en matrise ved hjelp av syntaksen array [index] = 'ny verdi', re-rendering vil ikke bli utløst. I stedet bør du bruke splice eller Vue Vue.set metode, som ligger utenfor omfanget av denne artikkelen. Se listen over advarsler i Vue-dokumentasjonen.

Arbeider ved siden av jQuery og andre biblioteker

Vue er ikke i konflikt med jQuery, Underscore, eller andre populære JavaScript-verktøybibliotek. Men du bør tenke to ganger om å prøve å bruke Vue sammen med et annet JavaScript rammeverk som React.

Det er sannsynlig at du ikke nødvendigvis trenge jQuery i tillegg til Vue, men det er mulig at du vil bruke det på andre områder av din søknad som ikke blir gjengitt av Vue.

Vue gir også "kroker" for å integrere med andre biblioteker, for eksempel å utføre animasjoner.

Bruke Babel eller annen Transpiler

Vue krever ikke Babel for at du skal være produktiv med den. Imidlertid vil Babel tillate deg å bruke noen av JavaScript's forefront spec-funksjoner, som malestrenger og mer sofistikerte array manipulasjonsteknikker.

Vue krever ingen spesielle bygningssystemer, noe som gjør det svært tilgjengelig for designorienterte utviklere som er vant til å skrive små mengder JavaScript, samtidig som de fortsatt er kraftige nok til å bli integrert i mer komplekse byggesystemer og fulle enkeltsidige applikasjoner.

Bruke Vue flere ganger på samme side

Ikke bare kan du ha flere Vue-forekomster på samme side, men du kan også referere til det samme underliggende dataobjektet på samme side. For eksempel, i vår tidligere dataliste eksempel, hvis JavaScript så slik ut:

var sharedObject = elementer: [] la vm = ny Vue (el: "#app", data: sharedObject) vm.items = [tekst: "Mangfoldighetsdag", tekst: "Strandtur" ]

Resultatet av å bruke denne malen ville være det samme som vårt tidligere eksempel:

 
Item.text
 

Vi kan imidlertid også legge til en andre forekomst av Vue som refererer til den samme underliggende datarrepresentasjonen som denne:

var vm2 = ny Vue (el: "# app2", data: sharedObject)

Vi kan da vise for eksempel antall ting i listen:

 
Items.length
 

Selvfølgelig kan dette ikke være den ønskede virkemåten. Du vil kanskje lage to komponenter som ikke er bundet til det samme underliggende objektet, og det vil fungere uten problem.

Hvis du vil lage to separate forekomster som start med det samme underliggende objektet, kan du bruke Object.assign Metode for å lage nye kopier av det samme objektet.

la vm2 = ny Vue (el: "# app2", data: Object.assign (, sharedObject))

Konklusjon

Vue er et utmerket valg for utviklere som vil ha en lett ramme som er lett å adoptere, men forutse at de trenger et mer robust rammeverk i fremtiden. Vue skalere med dine behov. Forstå hvordan du bruker Vue i ulike scenarier (og ha en ide om hva som skjer under overflaten) vil gi deg et meget kraftig verktøy som du kan være produktiv med fra dag ett.

I neste veiledning dekker vi mer av den unike verdien som Vue gir ved å se på noen eksempler på Vues rene kode. Ser deg der!

Lær Vue.js

Lær Vue.js med vår komplette Vue.js opplæringsguide, enten du er en erfaren koder eller en webdesigner som ønsker å hente nye utviklingsmetoder.