Chris Stegeman | Mar 13, 2024

js110 | JSON en VUE3 via CDN

Voorkennis:

  • Javascript, HTML, CSS
  • Basis: ophalen van JSON uit een API via AJAX-request

Doelen:

  • JSON ophalen, schrijven en wijzigen
  • Opzetten van een VUE3 pagina via CDN
  • Toepassen VUE3: van weergeven een platte JSON tot geneste structuren in HTML-tabel

Javascript

Ophalen van JSON met AJAX kan op meerdere manieren: met de FETCH-API van Javascript zelf, met Axios, plain Javascript en andere.

  • In deze module leer je a.d.h.v. van meerder voorbeeldscripts omgaan met die verschillende technieken
  • VUE is een frontend framework waar je verassend snel en met weinig code een API uit kan lezen en de data in HTML plaatsen.
  • We gebruiken Vue via CDN, dus we halen de VUE-library als Javascript-file binnen in onze pagina. Daarna gaan we over op VUE-cli, daarover later meer..

Opdracht

  • Bekijk deze website
    • Begin bovenaan met item 1
    • Kijk onder "inhoud" waar dit voorbeeld over gaat
    • klik op de "link" en bekijk de pagina
    • kopieer de complete broncode van die site en plak hem in een nieuwe map op jouw computer
      • de broncode bevat ook uitleg
      • kijk of je het bestaande script snapt en kan uitbreiden en aanpassen
    • Maak de opdrachten die onder "opdrachten staan"