logo Ma logo Theo logo Vue.js

Introductie Vue.js

Een JavaScript framework

Vue.js

  • is een JavaScript framework JavaScript logo
  • 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 slechts 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
  • Arraybewerkingen als forEach(), .map(), .filter()
  • Arrow-functies
  • Fetch API (incl promises)

Een crashcourse Vue.js

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

Een mogelijk resultaat: blanken5.home.xs4all.nl/ vueVerlanglijst2020/

Installatie

vue devtools

Project starten

Met de CLI:
  • 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

Vetur

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

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

Formeel:
<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!!!
  • GitHUbOverige 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 build 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/