Introductie Vue.js

Een JavaScript framework

Vue.js

• is een JavaScript framework
• gemaakt voor SinglePageApplications
• vergelijkbaar met React
  • eenvoudiger te leren
  • voor kleinere applicaties
  • niet zo groot
• werkt met componenten die elkaar gegevens doorgeven
• supersnel door bewerkingen in de Virtual DOM en alleen wijzigingen worden bijgewerkt

Dependencies

bij installatie blijkt dat Vue.js gebruik te maken van:

• Babel.js: om JS uit te voeren, die breder ondersteund wordt;
• ES-lint: voor foutopsporing en melding

Dat zie je natuurlijk in package.json

Veronderstelde voorkennis

• de beginselen van JavaScript
  • Arrays
  • Objecten
  • if-statements
  • werken met npm

Ook handig om te weten:

• ES6 syntax o.a. arrow-functie-notatie
• Arraybewerkingen als forEach(), .map(), .filter()
• Fetch API (incl promises, een stapje verder dan http-requests)

Een crashcourse Vue.js

Je mag bij de docent ook een mp4 ophalen, zodat het navigeren eenvoudiger gaat.

Installatie

• Breid Chrome devtools uit met https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
• Vue.js via npm: npm install -g @vue/cli
  (waarschijnlijk voorafgegaan door sudo zodat je gebruik maakt van administrator-rechten bij de globale installatie)
• Check met vue --version of Vue.js geïnstalleerd is

Project starten

• navigeer met map waarin het project moet komen
• vue create en geef de app-naam en bevestig de standaard instellingen
• npm run serve je project wordt ontwikkeld op http://localhost:8080

Na afloop van het ontwikkelen compilen met:

• npm run build

Vue kan ook met een projectserver werken, dit is in de crachcourse te zien.

Assistentie voor VS-Code

Breid de editor uit met Vetur. Je krijgt het aanbod al bij het openen van een .vue-bestand. Je krijgt dan o.a. direct syntax-highlighting.

Basisstructuur van een Vue component

Opdracht

1. bekijk de eerste 42 minuten van de crashcourse
2. bedenk een onderwerp voor je app:
   • een lijst van goede voornemens
   • een wenslijst van boeken, cd's, video's, etc.
   • etc...
3. probeer deze in Vue.js te maken. Het woord 'todo' of een afgeleide daarvan mag niet gebruikt worden!!

dynamische attributen in een template van een component

bijvoorbeeld de src en altattributen voor een img-element

<img v-bind:src="wens.url" v-bind:alt="wens.titel" />

Maar omdat dit vaak in Vue voorkomt is er een kortere notatie:

<img src="wens.url" alt="wens.titel" />

Inleveren

• De node-modules NIET committen!!!
• Overige bestanden commit je regelmatig op GitHub.
  Denk daarbij aan de afronding van een onderdeel van de app en na elke les.
• Na de eerste commit de GitHub-link al in Magister

De app in een subdirectory met bijvoorbeeld de naam /vue-crash-course/ :

• Maak een bestand vue.config.js in de root van je project;
• Daarin de volgende code:

  module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
      ? '/vue-crash-course/'
      : '/'
    }

• Hierna met npm run build je applicatie compileren in de dist map.
• De inhoud van deze map kan dan in de submap /vue-crash-course/ op bijvoorbeeld hosts2.ma-cloud.

Zie: http://bla.hosts.ma-cloud.nl/vue-cli-public-path/