Vue.js Fundamentals

Lesmethode :

Klassikaal

Algemeen :

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 sneller is te leren. Vue.js wordt ingezet door bedrijven als Nintendo, Alibaba en talloze andere (e-commerce) bedrijven. Een website in Vue bestaat niet meer uit losse, gekoppelde HTML-pagina's, maar 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 gaan we in op de structuur en architectuur van Vue-projecten. Uiteraard ga je ook met code aan de slag en leer je alles over databinding, component styling, je leert hoe componenten met elkaar communiceren via props en events, en je werkt met de Vue Router 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 gaan we kort in op state management met Vuex en deployment van applicaties naar een productieomgeving.

Doel :

Na afloop van de training ben je bekend met de mogelijkheden van het Vue.js-ecosysteem en kun je zelf Vue-applicaties opzetten, uitbreiden en uitrollen naar productie.

Doelgroep :

De training Vue.js Fundamentals is bedoeld voor webdevelopers die met dit nieuwe framework aan de slag willen en over een gedegen basiskennis van HTML, CSS en JavaScript beschikken. Ook ontwikkelaars die een achtergrond hebben in Java of C# kunnen meestal snel met Vue.js overweg. Wel is het van belang dat de JavaScript-kennis op peil is.

Voorkennis :

Ervaring met een backend MVC-framework zoals .NET MVC, Java Spring Boot of PHP Laravel, of een frontend framework zoals Angular of React kan van pas komen, maar is niet beslist noodzakelijk.
Enige kennis van NodeJS, het werken in een opdrachtregelomgeving (DOS-prompt) en het installeren van packages.
Het cursusmateriaal is in het Engels. Een goede beheersing van de Engelse taal is vereist.

En de volgende cursussen:

• Bouwen van webpagina's met HTML5

Onderwerpen :

- Wat is Vue, overzicht van het Vue-landschap
   - Hoe ziet een Vue-applicatie er uit
   - Tooling ¿ werken met Vue CLI, Vue Devtools en de Style Guide
- Uw eerste Vue-project
   - De werkomgeving instellen
   - Een project maken met de Vue CLI
   - Het project starten
   - De homepage aanpassen
- Vue componenten
   - Global components versus Single File Components
   - Zelf componenten maken
   - Data in de applicatie laden
   - Data binding met {{ ... }}
   - Attribute binding met v-bind
   - Event binding met v-on
   - Shorthand notation voor bindings
- Advanced components
   - Computed properties
   - Conditioneel binden met v-if en v-show
   - Herhalingen en lussen met v-for
   - Data formatteren met filters
   - Lokale filters en globale filters
- Component styling
   - Global styles versus scoped styles
   - Stijlen conditioneel toepassen
   - Classes conditioneel toepassen
   - Code hergebruiken met mixins
- 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
   - Routeren toestaan of verbieden met guards
- Managing state met Vuex
   - Een Vuex store instellen
   - De store state wijzigen met Mutations
   - Items uit de store ophalen en tonen
   - Actions gebruiken om te werken met API's en asynchrone data
   - Werken met Promisies en Actions
   - De store organiseren met modules en namespaces
- Een Vue-applicatie uitrollen naar productie
   - Een basis build maken met Vue CLI
   - Omgevingsvariabelen en build modes gebruiken
   - Deployment naar een productieserver
   - Enkele woorden over een eigen WebPack-configuratie