Vue.js

1 Kennismaken met Vue.js
Wat is Vue.js?
Populariteit van Vue.js
Wie gebruiken Vue.js?
Het Vue.js-ecosysteem
Architectuur van Vue-applicaties
De Vue-instantie
Vue-apps met routing
Boomstructuur van componenten
Benodigde voorkennis
Waarom een boek?
De ontwikkelomgeving inrichten
Oefenbestanden downloaden
Conclusie
Praktijkoefeningen

2 Hello World in Vue.js
Mogelijkheden voor Vue-projecten
Nieuw project starten en draaien
Het project openen en aanpassen
Theorie – verschillende soorten API’s
Theorie – de bestandsstructuur verkennen
De rol van package.json
Overige belangrijke bestanden
Verschillende bestandstypen?
Nieuwe componenten toevoegen
Samenvatting
Praktijkoefeningen

3 Componenten en databinding
Single file components en globale componenten
Basisapplicatie
Zijstap – Bootstrap toevoegen
Dit gaan we maken: VacationPicker
Stap 1 – Het gegevensbestand maken
Stap 2 – Nieuwe component maken
Stap 3 – gegevens in de applicatie importeren
Stap 4 – Gegevens binden; de directive v-for
Stap 5 – App.vue aanpassen
Meer voorbeelden van databinding
Databinding met v-bind
Korte notatie voor v-bind
Gebeurtenisbinding met v-on
Functies aanroepen met v-on
Samenvatting
Praktijkoefeningen

4 Meer over componenten
Berekende eigenschappen (computed properties)
V-if gebruiken
Binden aan afbeeldingen
Mixins gebruiken
Lifecycle hooks
Werken met v-model
V-model bij een keuzelijst
Samenvatting
Praktijkoefeningen

5 Communicatie tussen componenten
Werken met meerdere componenten
De component CountryDetail maken
Props typeren en valideren als objecten
Werken met custom events
Inhoud hergebruiken met slots
Animaties met het element <transition>
Samenvatting
Praktijkoefeningen

6 Werken met de router
Kennismaken met routing
Routing toevoegen aan een bestaande app
HTML5-modus inschakelen
Een hoofdmenu maken – koppelen naar pagina’s
Actieve links markeren
Navigeren via code
Dynamische routes met routeparameters
Het juiste land ophalen
Het verschil tussen $router en $route
Lazy loading
Meer over routing
Samenvatting
Praktijkoefeningen

7 State management: Pinia
Wat is state management?
Concepten bij stores
Kennismaken – een tellerapplicatie
State in een andere component gebruiken
State management met complexe objecten
Communiceren met externe API’s
Axios gebruiken
Axios toevoegen aan de store
De applicatie testen
Meer over state management
Samenvatting
Praktijkoefeningen

8 Vue-applicaties uitrollen naar de server
Productiebuild zonder build tools
Een pad aangeven in de productiebuild
Distribueren naar een productieserver
Publiceren naar Netlify

Tot slot
Samenvatting
Praktijkoefeningen
Index