Vue.js

1 Kennismaken met Vue.js 1
Wat is Vue.js? 2
Libraries en frameworks 2
Omschrijving van Vue.js 4
Progressieve ontwikkeling 4
Vue op internet 6
Geen groot bedrijf
Populariteit van Vue.js 8
Github sterren 8
Npm downloads 9
Google Trends 10
Wie gebruiken Vue.js? 11
Het Vue.js-ecosysteem 12
Architectuur van Vue-applicaties 13
Single Page Application 14
Vue-begrippen 16
De Vue-instantie 16
De hoofdcomponent in Vue 2 en in Vue 3 18
Vue-apps met routing 19
Boomstructuur van componenten 20
De boomstructuur visueel maken 20
Benodigde voorkennis 21
Tips voor meer lezen 23
Waarom een boek? 23
De ontwikkelomgeving inrichten 24
Editor en browser 24
Node.js 25
Vue CLI 27
Vue.js devtools 29
Oefenbestanden downloaden 30
Conclusie 31
Praktijkoefeningen 32

2 Hello World in Vue.js 37
Mogelijkheden voor Vue-projecten 38
Vue CLI installeren 39
Nieuw project starten en draaien 40
Zijstap – de grafische interface voor Vue CLI 45
Vue Project Manager 45
Mogelijkheden van Vue ui 46
Vue ui stoppen 48
Het project openen en aanpassen 49
Component aanpassen 50
Theorie – de bestandsstructuur verkennen 51
Mappen 51
De rol van package.json 53
Overige belangrijke bestanden 55
Main.js 55
App.vue 56
HelloWorld.vue 58
Verschillende bestandstypen? 59
Alles in één bestand 60
Nieuwe componenten toevoegen 60
Export default 62
De component insluiten in de applicatie 63
Naamgeving van componenten 65
Slots 65
Conclusie 65
Samenvatting 66
Praktijkoefeningen 68

3 Componenten en databinding 71
Single file components en globale componenten 72
Single file components 72
Globale componenten 73
Zijstap – Bootstrap toevoegen 74
Bootstrap installeren 75
Standaardstijlen verwijderen 75
Dit gaan we maken: VacationPicker 76
Eisen aan de applicatie 76
Stap 1 – Het gegevensbestand maken 77
Stap 2 – Nieuwe component maken 79
Stap 3 – gegevens in de applicatie importeren 80
Stap 4 – Gegevens binden; de directive v-for 81
Directives 81
Template uitbreiden 82
Stap 5 – App.vue aanpassen 83
Index gebruiken 85
Meer voorbeelden van databinding 86
Databinding met v-bind 87
Attributen title en id dynamisch maken 88
Sleutelwaarde opgeven bij v-for 89
Speciaal attribuut key 90
Korte notatie voor v-bind 91
Geen interpolatie binnen attributen 92
Gebeurtenisbinding met v-on 92
Counter declareren 93
Korte notatie voor v-on 94
Functies aanroepen met v-on 94
ES6-notatiewijze voor methoden 96
Samenvatting 97
Praktijkoefeningen 98

4 Meer over componenten 103
Berekende eigenschappen (computed properties) 104
Betere prestaties 105
Component aanpassen met berekende eigenschap 106
View aanpassen 108
Functie versus eigenschap 108
V-if gebruiken 109
v-if versus v-show 110
Binden aan afbeeldingen 111
WebPack en require() 112
getImgUrl() 113
Mixins gebruiken 113
Kenmerken van mixins 115
Afbeelding laden als mixin 115
Mixin toevoegen aan component 116
Regels voor mixins 117
Lifecycle hooks 118
Voorbeeld lifecycle hook 120
Typisch gebruik van enkele lifecycle hooks 121
Werken met v-model 122
V-model voor tekstinvoervelden 123
Nieuwe array vullen 123
Correcte waarden 126
V-model bij een keuzelijst 126
Samenvatting 129
Praktijkoefeningen 130

5 Communicatie tussen componenten 135
Werken met meerdere componenten 136
Voordelen van werken met componenten 136
De component CountryDetail maken 137
Stap 1 – Een nieuwe component maken en toevoegen 137
De component CountryDetail 138
Stap 2 – Kindcomponent voorbereiden om gegevens te ontvangen: props 139
Props schrijven 139
De component uitbreiden 139
Stap 3 – De oudercomponent bijwerken 141
Stap 4 – Logica verplaatsen 142
Mixin toevoegen 143
Props typeren en valideren 144
Objectnotatie voor props 144
Verplichte props 145
Verkeerd type voor props 146
Validatiefuncties 146
Werken met custom events 148
Events verzenden met this.$emit() 149
Een gebeurtenis opvangen 149
Een waardering verzenden 150
Aangeven dat event wordt verzonden 151
De gebeurtenis verwerken in de oudercomponent 152
Samenvatting 153
Inhoud hergebruiken met slots 154
Een accordeonstructuur maken 155
De component CollapsibleSection.vue 155
Animaties met het element 157
Enter- en leave-overgangen 158
De HTML uitbreiden 159
De CSS-klassen schrijven 159
Samenvatting 160
Praktijkoefeningen 161

6 Werken met de router 163
Kennismaken met routing 164
Single page application of SPA 164
Vue Router 165
Architectuur bij routing 167
Routing toevoegen aan een bestaande app 169
Stap 1 – Routing installeren 170
Stap 2 – Een directory maken voor de router 171
Stap 3 – De routetabel definiëren 172
De homepage 173
Stap 4 – Routes toevoegen aan de Vue-configuratie 173
Stap 5 – Vue vertellen waar de inhoud getoond moet worden 174
Stap 6 – Componenten maken 174
Stap 7 – De applicatie testen 175
HTML5-modus inschakelen 177
Een hoofdmenu maken – koppelen naar pagina’s 178
Geen meer 178
gebruiken 179
Actieve links markeren 182
Vue 2.x: exacte links markeren 183
Navigeren via code 186
Naar de detailpagina 186
Stap 1 – Route toevoegen 187
Stap 2 – Code toevoegen 187
Dynamische routes met routeparameters 189
Stap 1 – Dubbele punt voor dynamische parameters 189
Stap 2 – CountryDetail aanpassen 189
Stap 3 – Routerlink aanpassen 190
Het juiste land ophalen 192
Het verschil tussen $router en $route 193
Lazy loading 194
Voorbveeld van lazy loading 194
Meer over routing 196
Samenvatting 196
Praktijkoefeningen 198

7 State management: vuex 201
Wat is state management? 202
Props en events 202
Store 203
Vuex 203
Data in één richting 204
Single source of truth 205
Concepten bij stores 206
Kennismaken – een tellerapplicatie 207
Stap 1 – Nieuwe applicatie maken 207
Stap 2 – De store instellen 209
Stap 3 – Gegevens aan de store toevoegen 211
Stap 4 – Mutations toevoegen 212
Stap 5 – Actions toevoegen 213
Stap 6 – Component bijwerken (HTML) 214
Stap 7 – Component bijwerken (JavaScript) 215
Counter ophalen 216
Applicatie testen 217
State in een andere component gebruiken 218
State management met complexe objecten 219
API’s op internet 220
Communiceren met externe API’s 221
Axios gebruiken 222
Axios installeren en gebruiken 223
Axios toevoegen aan de store 224
Stap 1 – De state aanpassen 225
Stap 2 – Mutations toevoegen 225
Stap 3 – Actions toevoegen 226
Stap 4 – Nieuwe component maken 228
Logica voor de component 229
Stijl voor de vlag toevoegen 230
Routing aanpassen 231
De applicatie testen 231
Een fout simuleren 232
Getters gebruiken 234
De store aanpassen 234
Klassieke notatie 235
Nieuwe component maken 235
Countries.vue aanpassen 236
Router aanpassen 237
Werken met store modules 238
Directory /store/modules maken 239
De hoofdmodule bijwerken 241
De componenten bijwerken 242
Notatie van getter met modules 243
State management in de Vue DevTools 244
Meer over state management 245
Samenvatting 246
Praktijkoefeningen 247

8 Vue-applicaties uitrollen naar de server 253
Productiebuild met Vue CLI 254
Build met Vue CLI 255
Een pad aangeven in de productiebuild 256
Vue.config.js 256
Distribueren naar een productieserver 257
Publiceren naar Netlify 257
Aanmelden bij Netlify 259
Continuous deployment 260
Slepen-en-neerzetten 261
De site publiceren 262
De site eigen naam geven 264
Een nieuwe versie publiceren 265
Redirect naar de homepage instellen 266
Redirect altijd meesturen 266
Tot slot 267
Samenvatting 269
Praktijkoefeningen 269

Index 271