js70 | vue3 cdn base

Voorkennis:

JS basics

JSON (zie eventueel op deze site: JSON)

Doelen:

opzetten basis VUE3 via CDN

strings, arrays en objecten uit data object van Vue ophalen en weergeven

Bekijk een basis VUE3 opzet via CDN op std.stegion.nl.

opdracht

neem het voorbeeld over en kijk of de variabele "tekst" in data ook in de HTML getoond wordt
er staat ook een array "lijst" in data.
- Toon deze net als "tekst" in de HTML
- zoek in Google op "v-for" en probeer de lijst in een <ul> structuur te plaatsen

voeg aan data een array van objecten toe

data: {
    test: "testing 123",
    aNamen: [
        { "vnaam": "Jan", "tv":"", "anaam":"Klaassen"},
        { "vnaam": "Katrijn", "tv": "van der", "anaam": "Worp" }
    ]
}

Zoek via "v-for" hoe je de "index" als rijnummer kunt ophalen en plaats nu de namen in een HTML <table>
voeg ook wat CSS toe: