I introduktionsposten för denna serie talade vi lite om hur webbdesigners kan dra nytta av att använda Vue. I denna handledning lär vi dig hur du får Vue igång, samtidigt som du svarar på några inledande frågor du kanske har.

Så lägger du till Vue i ditt projekt

Vue är bara JavaScript, vilket innebär att du kan ladda det genom att inkludera en skripttag i ditt HTML-dokument. Vue webbplats rekommenderar att du använder en CDN som https://cdn.jsdelivr.net/npm/vue för att vara säker på att få den senaste versionen. Du kan också använda andra versionsspecifika länkar som https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js.

Notera: Om du skapar en produktionsapp, rekommenderas att du använder en paketkontroll som garn hantera alla dina beroenden och distribuera till CDN-drivna platser. Det här är särskilt viktigt om du vill bygga Vue i ditt JavaScript-paket, till exempel med något som Webpack. 

Förstå Markup och Mallar

När du skapar en Vue-instans kan du använda el alternativet i konfigurationsobjektet för att ansluta din instans till DOM. De el alternativet bör vara antingen ett element eller en CSS-väljarsnor. Detta element kan också innehålla mallkod. Så, i din HTML-sida kan du ha något liknande:

 
titel
 
innehåll
 

Och sedan i din JavaScript skulle du ha något liknande:

var app = ny Vue (el: "#app", data: title: "Threat Level Midnight", innehåll: "AGENT MICHAEL SCARN, otroligt snygg utan att ens försöka, slappnar av vid sitt skrivbord, fötter upp, granska en fallfil . Hans vapenstöd bredvid hans FBI-märke, som glänsar i kontorsbelysningen av floriserande ljus. Klädd i en kostym, han har lossat sitt slips och löst några knappar som avslöjar sitt håriga bröst. ",)

Återigen notera att "#app" strängen hänvisar till div i din HTML. Vue kommer att ersätta det inre innehållet i den diven med resultatet av Vues återgivningssteg.

Vad Vue gör i bakgrunden

Vi har fastställt att Vue tillåter oss att skilja vår åsikt från våra data. Viss logik kan utföras i själva vyn, men vi kan undvika följande mönster som leder till dålig kod eller felaktig status:

• Lagring / läsning av data i DOM
• Uppdatering av DOM med direkt DOM-manipulation och modifiering i stället för mallåtergivning
• Använda procedurmetoder för att utvärdera tillstånd på ojämn sätt som ofta leder till en DOM-representation som inte matchar det avsedda tillståndet

Så hur fungerar det här?

Vue låter dig ställa in information i data alternativ. Vilken nyckelvärdespar som passeras inuti detta objekt kommer att observeras för ändringar, och allt beroende på den datadelen kommer att vara re-framförs när data ändras.

Vad detta i huvudsak betyder är att data objektet är reaktiv. Om du använder JavaScript-inbyggda datamanipuleringsmetoder, kommer ändringen att utlösa Vues återgivningsmotor för att göra sin magi.

Om till exempel, om ditt dataobjekt är konfigurerat så här:

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

Med denna mallkod:

 
Item.text
 

Och senare lägger du till några saker, så här:

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

Mallen skulle automatiskt återge, iterera (looping över) de objekt som ställts in.

Viktig gräns för reaktivitet

Som JavaScript-funktionen som tillåter Vue att titta på data objekt (objekt getters och setters) ger inte information när nya nycklar läggs till eller befintliga nycklar tas bort, att lägga till och ta bort nycklar leder inte till någon återgivning. Så, i samma exempel ovan, om det ursprungliga dataobjektet är tomt (objekt: [] är inte närvarande):

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

Eventuella förändringar till vm.items kommer inte att utlösa en rerdering. Från Vue dokumentationen: 

"Vue tillåter inte dynamiskt att lägga till nya reaktiva egenskaper på rotnivå till en redan skapad instans."

Dessutom är det viktigt att notera att när du lägger till objekt i en array med hjälp av syntaxen array [index] = 'nytt värde', återgivningen utlöses inte. Istället bör du använda skarv eller Vue Vue.set metod som ligger utanför ramen för denna artikel. Visa listan över försiktighetsåtgärder i Vue-dokumentationen.

Arbetar utöver jQuery och andra bibliotek

Vue strider inte mot jQuery, Underscore eller något annat populärt JavaScript-verktygsbibliotek. Men du bör tänka två gånger om att försöka använda Vue tillsammans med en annan JavaScript ramverk gillar React.

Det är troligt att du inte nödvändigtvis behöver jQuery utöver Vue, men det är möjligt att du vill använda det på andra områden i din ansökan som inte görs av Vue.

Vue ger också "krokar" för att integrera med andra bibliotek, till exempel för att utföra animeringar.

Använda Babel eller annan Transpiler

Vue kräver inte Babel för att du ska vara produktiv med den. Babel kommer dock att tillåta dig att använda några av JavaScript: s främre specfunktioner, som mallsträngar och mer sofistikerade array manipulationstekniker.

Vue kräver inga speciella byggsystem, vilket gör det väldigt tillgängligt för designorienterade utvecklare som brukar skriva små mängder JavaScript samtidigt som de är tillräckligt kraftfulla för att kunna integreras i mer komplexa byggsystem och fullständiga enkelsidiga applikationer.

Använda flera gånger på Vue på samma sida

Inte bara kan du ha flera Vue-instanser på samma sida, men du kan även referera till samma underliggande dataobjekt på samma sida. Till exempel, i vår tidigare datalista exempel, om vår JavaScript såg ut så här:

var sharedObject = items: [] låt vm = ny Vue (el: "#app", data: sharedObject) vm.items = [text: "Diversity Day", text: "Beach Trip" ]

Resultatet av att använda denna mall skulle vara samma som vårt tidigare exempel:

 
Item.text
 

Vi kan emellertid också lägga till en andra instans av Vue som refererar till samma underliggande datarrepresentation så här:

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

Vi kan då visa till exempel antalet objekt i listan:

 
Items.length
 

Det kan givetvis inte vara det önskade beteendet. Du kanske vill skapa två komponenter som inte är bundna till samma underliggande objekt, och det fungerar utan problem.

Om du vill skapa två separata instanser som Start med samma underliggande objekt kan du använda Object.assign Metod för att skapa nya kopior av samma objekt.

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

Slutsats

Vue är ett utmärkt val för utvecklare som vill ha en lätt ram som är lätt att anta, men förutse att man behöver ha en mer robust ram i framtiden. Vue kommer att skala med dina behov. Förstå hur du använder Vue i olika scenarier (och ha en uppfattning om vad som händer under ytan) ger dig en mycket kraftfull verktygssats som du kan vara produktiv med från dag ett.

I nästa handledning täcker vi mer av det unika värdet som Vue ger genom att titta på några exempel på Vues rena kod. Vi ses där!

Lär dig Vue.js

Lär dig Vue.js med vår kompletta Vue.js handledning, oavsett om du är en erfaren kodgivare eller webbdesigner som vill hämta nya utvecklingsmetoder.