In de inleidende post voor deze serie hebben we een beetje gesproken over hoe webontwerpers kunnen profiteren door Vue te gebruiken. In deze tutorial leren we Vue up en running te krijgen, terwijl hij enkele aanvankelijke vragen beantwoordt die je hebt.

Hoe u Vue aan uw project toevoegt

Vue is slechts JavaScript, wat betekent dat u het kunt laden door een scripttag in uw HTML-document op te nemen. Vue's site beveelt het gebruik van een CDN aan https://cdn.jsdelivr.net/npm/vue om zeker te zijn van de nieuwste versie. Je kunt ook andere versiespecifieke links gebruiken zoals https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js.

Notitie: Als u een productie-app maakt, is het raadzaam een ​​pakketcontroller te gebruiken zoals garen om al uw afhankelijkheden te beheren en te implementeren op door CDN gevoede locaties. Dit is vooral belangrijk als je Vue in je JavaScript-pakket wilt bouwen, bijvoorbeeld met iets als Webpack. 

Inzicht in markeringen en sjablonen

Wanneer u een Vue "instantie" maakt, kunt u de el optie in het configuratieobject om uw exemplaar met de DOM te verbinden. De el optie moet een element- of een CSS-selectiereeks zijn. Dit element kan ook sjablooncode bevatten. Dus in de HTML van je pagina zou je zoiets als dit kunnen hebben:

 
titel
 
inhoud
 

En dan in je JavaScript, zou je zoiets hebben als dit:

var app = new Vue (el: "#app", data: title: "Threat Level Midnight", inhoud: "AGENT MICHAEL SCARN, stoere knappe man zonder te proberen, ontspant aan zijn bureau, voeten omhoog, bekijkt een dossier Zijn mitrailleurs naast zijn FBI-embleem, dat in het vurige TL-licht van het kantoor glinstert.Hij heeft een das om en heeft zijn das losgemaakt en enkele knopen losgemaakt, waardoor zijn behaarde borst is onthuld. ",)

Nogmaals, merk op dat het "#App" string verwijst naar de div in uw HTML. Vue zal de innerlijke inhoud van die div vervangen door het resultaat van de renderingstap van Vue.

Wat Vue doet op de achtergrond

We hebben vastgesteld dat Vue ons in staat stelt om onze visie te scheiden van onze gegevens. Sommige logica kan in de weergave zelf worden uitgevoerd, maar we kunnen de volgende patronen vermijden die leiden tot slechte code of een onjuiste staat:

• Gegevens opslaan / lezen in de DOM
• De DOM bijwerken met directe DOM-manipulatie en -modificatie in plaats van sjabloonrendering
• Het gebruik van procedurele methoden om de toestand te evalueren op onsamenhangende manieren die vaak leiden tot een DOM-representatie die niet overeenkomt met de beoogde staat

Dus hoe werkt dit?

Met Vue kunt u informatie in de gegevens keuze. Elk sleutelwaardepaar dat binnen dit object wordt gepasseerd, wordt gecontroleerd op wijzigingen en alles wat van dat gegeven afhankelijk is, zal worden re-teruggegeven wanneer de gegevens veranderen.

Wat dit in wezen betekent, is dat het gegevens object is reagerend. Als u de ingebouwde gegevensmanipulatiemethoden van JavaScript gebruikt, activeert de wijziging de rendering-engine van Vue om zijn magie te doen.

Als uw gegevensobject bijvoorbeeld zo is opgezet:

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

Met deze sjablooncode:

 
 Item.text
 

En later voeg je een aantal items toe, zoals dit:

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

De sjabloon zou automatisch opnieuw renderen, itereren (doorlussen) van de items die worden ingesteld.

Belangrijke waarschuwing voor reactiviteit

Als de JavaScript-functie waarmee Vue de gegevens object (object getters en setters) geeft geen informatie wanneer nieuwe sleutels worden toegevoegd of bestaande sleutels worden verwijderd, het toevoegen en verwijderen van sleutels activeert geen re-rendering. Dus, in hetzelfde voorbeeld hierboven, als het initiële data-object leeg is (items: [] is niet aanwezig):

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

Elke wijziging aan vm.items zal geen rerendering activeren. Uit de Vue-documentatie: 

"Vue staat niet toe dynamische nieuwe reactieve eigenschappen op rootniveau toe te voegen aan een reeds aangemaakt exemplaar."

Bovendien is het belangrijk om op te merken dat bij het toevoegen van items aan een array met behulp van de syntaxis array [index] = 'nieuwe waarde', re-rendering wordt niet geactiveerd. In plaats daarvan zou je splice of Vue's moeten gebruiken Vue.set methode, die buiten het bestek van dit artikel valt. Bekijk de lijst met waarschuwingen in de Vue-documentatie.

Werken naast jQuery en andere bibliotheken

Vue is niet in strijd met jQuery, Underscore of andere populaire JavaScript-hulpprogramma's. U moet echter wel twee keer nadenken over het gebruik van Vue naast een ander JavaScript kader zoals React.

Dat is waarschijnlijk niet noodzakelijk nodig hebben jQuery in aanvulling op Vue, maar het is mogelijk dat u het wilt gebruiken in andere delen van uw toepassing die niet door Vue worden gerenderd.

Vue biedt ook "hooks" om te integreren met andere bibliotheken, bijvoorbeeld om animaties uit te voeren.

Babel of een andere transponder gebruiken

Vue heeft Babel niet nodig om er productief mee te zijn. Met Babel kunt u echter een aantal van de spec-spec-functies van JavaScript gebruiken, zoals sjabloonreeksen en meer geavanceerde technieken voor arraymanipulatie.

Vue vereist geen speciale build-systemen, waardoor het zeer toegankelijk is voor ontwerpgerichte ontwikkelaars die gewend zijn om kleine hoeveelheden JavaScript te schrijven, terwijl ze nog steeds krachtig genoeg zijn om te worden geïntegreerd in complexere build-systemen en volledige single-page-applicaties.

Meerdere keren gebruik maken van Vue op dezelfde pagina

Niet alleen kunt u meerdere Vue-instanties op dezelfde pagina hebben, maar u kunt zelfs verwijzen naar hetzelfde onderliggende gegevensobject op dezelfde pagina. Bijvoorbeeld, in ons voorbeeld van de vorige lijst, als ons JavaScript er zo uitzag:

var sharedObject = items: [] let vm = new Vue (el: "#app", data: sharedObject) vm.items = [text: "Diversity Day", text: "Beach Trip" ]

Het resultaat van het gebruik van deze sjabloon is hetzelfde als in ons vorige voorbeeld:

 
 Item.text
 

We kunnen echter ook een tweede exemplaar van Vue toevoegen dat verwijst naar dezelfde onderliggende gegevensrepresentatie als deze:

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

We kunnen dan bijvoorbeeld het aantal items in de lijst weergeven:

 
 Items.length
 

Dit is natuurlijk niet het gewenste gedrag. Misschien wilt u twee componenten maken die niet aan hetzelfde onderliggende object zijn gekoppeld en die probleemloos werken.

Als u twee afzonderlijke instanties wilt maken die begin met hetzelfde onderliggende object, kunt u de Object.assign methode om nieuwe kopieën van hetzelfde object te maken.

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

Conclusie

Vue is een uitstekende keuze voor ontwikkelaars die een lichtgewicht raamwerk willen dat gemakkelijk is toe te passen, maar anticiperen op een meer robuust raamwerk in de toekomst. Vue zal zich aanpassen aan uw behoeften. Inzicht in het gebruik van Vue in verschillende scenario's (en een idee hebben van wat er onder de oppervlakte gebeurt) zal u voorzien van een zeer krachtige toolset waarmee u vanaf dag één productief kunt zijn.

In de volgende tutorial behandelen we meer van de unieke waarde die Vue biedt door enkele voorbeelden van de schone code van Vue te bekijken. Zie je daar!

Leer Vue.js

Leer Vue.js met onze volledige handleiding voor Vue.js, of je nu een ervaren coder bent of een webontwerper die op zoek is naar nieuwe front-end ontwikkelingstechnieken.