Vue.js Fundamentals

Vue.js is een relatief nieuw frontend JavaScript-framework dat even krachtig is als de grote tegenhangers Angular en React. Vue.js kent echter een eenvoudiger syntaxis, heeft minder overhead en is sneller te leren. Vue.js wordt ingezet door bedrijven als Nintendo, Alibaba, L’Oréal en talloze andere (e-commerce) bedrijven.

Een website in Vue bestaat niet meer uit losse, gekoppelde HTML-pagina’s, maar uit meerdere relatief kleine, gespecialiseerde webcomponenten die met elkaar samenwerken en zo een complete applicatie vormen.

In de training Vue.js Fundamentals leer je de basisbeginselen van Vue-applicaties en wordt ingegaan op de structuur en architectuur van Vue-projecten. Uiteraard gaat u ook met code aan de slag en leer je alles over databinding, component styling, leer je hoe componenten met elkaar communiceren via props en events, en wordt de Vue Router ingezet om grotere applicaties in te stellen. Tevens wordt aandacht besteed aan het communiceren met externe API’s en de wijze waarop data uit externe bronnen in de applicatie wordt verwerkt. Tot slot wordt ingegaan op state management met Vuex en het uitrollen van applicaties naar een productieomgeving.

Na afloop van de training kent u het Vue.js-ecosysteem en kunt u zelf Vue-applicaties opzetten, onderhouden en uitrollen naar productie.

Trefwoorden in je voorkennis zijn:

• Enige kennis van HTML en CSS
• Gedegen kennis van JavaScript (functies, arrays, objecten, functioneel programmeren).
• Ervaring met het ebuggen van webapplicaties in Chrome
• Enige kennis van Node.js.
• Enige kennis van de Engelse taal. Veel websites, documentatie en achtergrondinformatie is alleen in het Engels beschikbaar.

• Wat is Vue
• Hoe ziet een Vue-applicatie er uit
• Tooling (Node.js, Vue DevTools, Vue-CLI)
• Je eerste Vue-project
• Vue componenten
• Globale componenten vs. Single-file componenten
• Zelf componenten maken
• Data in de applicatie laden
• Data binding met {{ ...}}
• Attribuut binding met v-bind
• Event binding met v-on
• Shorthand-notation voor bindings
• Geavanceerde componenten
• Computed properties
• Conditioneel binden met v-if en v-show
• Heralingen en lussen met v-for
• Data formatteren met filters
• Lokale filters en globale filters
• Mixins
• Global styles vs. scoped styles
• Stijlen en classes conditioneel toepassen
• Inter-component communicatie
• Werken met custom properties (props)
• Props typeren en valideren
• Werken met custom events
• Vue Router
• De router installeren en instellen
• Verwijzen naar gekoppelde pagina's
• Werken met route-parameters
• HTML5 History mode instellen
• Werken met Route Guards
• State management met Vuex
• Een Vuex store instellen
• State wijzigen met Mutations
• Items uit de store ophalen en tonen
• Actions gebruiken om te werken met API's en asynchrone data
• Promises en Actions
• Store organisatie in grotere applicaties (modules en namespaces)