Vue essentials

`<script setup>` vs. `<script>`

De <script setup>-syntaxis biedt een nieuwe manier om componenten te definiëren in Vue 3. Het vervangt de traditionele setup()-functie en biedt een kortere, efficiënte aanpak. Alles wat je in een <script setup>-blok definieert, is direct beschikbaar in de template, zonder dat je extra boilerplate-code nodig hebt.

Voorbeeld: Component met <script setup>

<script setup lang="ts">
const bericht = 'Hallo, Vue 3!';
</script>

<template>
  <h1>{{ bericht }}</h1>
</template>

In dit voorbeeld:

De variabele bericht is direct beschikbaar in de template.
Er is geen setup()-functie of expliciete return nodig.

Vergelijking: Met en zonder `<script setup>`

Laten we een voorbeeldcomponent bouwen met beide benaderingen, zodat je de verschillen kunt zien.

Klassieke benadering: Zonder `<script setup>`

Hier gebruiken we de traditionele setup()-functie.

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'TellerComponent',
  setup() {
    const teller = ref(0);

    const verhoog = () => {
      teller.value++;
    };

    return {
      teller,
      verhoog,
    };
  },
});
</script>

<template>
  <div>
    <p>Teller: {{ teller }}</p>
    <button @click="verhoog">Verhoog</button>
  </div>
</template>

Kenmerken:

Je gebruikt defineComponent om een Vue-component te definiëren.
De setup()-functie bevat de logica en retourneert de variabelen en methoden die beschikbaar zijn in de template.
Meer boilerplate-code (bijvoorbeeld defineComponent, setup() en return).

2. Moderne benadering: Met `<script setup>`

Hetzelfde voorbeeld, maar met <script setup>.

<script setup lang="ts">
import { ref } from 'vue';

const teller = ref(0);

const verhoog = () => {
  teller.value++;
};
</script>

<template>
  <div>
    <p>Teller: {{ teller }}</p>
    <button @click="verhoog">Verhoog</button>
  </div>
</template>

Kenmerken:

Geen defineComponent of setup()-functie nodig.
Minder boilerplate, wat de code overzichtelijker maakt.
Alles wat je in het <script setup>-blok definieert, is direct beschikbaar in de template.

Belangrijke concepten in Vue 3

Reactiviteit met `ref`

De ref-functie maakt een variabele reactief. Dit betekent dat wijzigingen in de waarde automatisch worden bijgewerkt in de DOM.

Wat is een `ref`?

Een ref is een eenvoudige manier om reactiviteit toe te voegen aan primitieve waarden (zoals strings, nummers of booleans) en complexe objecten (zoals arrays en objecten). Wanneer een ref-waarde wordt gewijzigd, zorgt Vue ervoor dat de wijzigingen automatisch worden doorgevoerd in de DOM (= document of de html pagina).

Wanneer gebruik je `ref`?

Gebruik ref voor losse, primitieve waarden die reactief moeten zijn.
Voor complexe objecten of meerdere gekoppelde waarden kun je ook reactive gebruiken, hoewel ref flexibeler is omdat je de .value expliciet beheert.

Voorbeeld: Een eenvoudige teller

<script setup lang="ts">
import { ref } from 'vue';

const teller = ref(0);

const verhoog = () => {
  teller.value++;
};
</script>

<template>
  <div>
    <p>Teller: {{ teller }}</p>
    <button @click="verhoog">Verhoog</button>
  </div>
</template>

Belangrijk:

Je gebruikt .value om de waarde van een ref te lezen of bij te werken.

Reactieve arrays en objecten

Hoewel ref ideaal is voor simpele waarden, werkt het ook met arrays en objecten. Je moet nog steeds .value gebruiken om toegang te krijgen tot de array of het object.

Voorbeeld: Een reactieve array

<script setup lang="ts">
import { ref, type Ref } from 'vue';

const items: Ref<string[]>= ref(['Appel', 'Banaan']);

const voegToe = (item: string) => {
  items.value.push(item);
};
</script>

<template>
  <ul>
    <li v-for="(item, index) in items.value" :key="index">{{ item }}</li>
  </ul>
  <button @click="voegToe('Kers')">Voeg Kers toe</button>
</template>

Voorbeeld: Een reactief object

<script setup lang="ts">
import { ref } from 'vue';

const gebruiker = ref({
  naam: 'Jan',
  leeftijd: 30
});

const verouder = () => {
  gebruiker.value.leeftijd++;
};
</script>

<template>
  <div>
    <p>Naam: {{ gebruiker.value.naam }}</p>
    <p>Leeftijd: {{ gebruiker.value.leeftijd }}</p>
    <button @click="verouder">Verouder</button>
  </div>
</template>

Tip: Gebruik .value altijd bij het werken met ref.

Verschil tussen `ref` en `reactive`

ref werkt met een enkele reactieve waarde en vereist .value.
reactive maakt een heel object reactief, zonder .value te vereisen.

<script setup lang="ts">
import { reactive } from 'vue';

const gebruiker = reactive({
  naam: 'Jan',
  leeftijd: 30
});

const verouder = () => {
  gebruiker.leeftijd++;
};
</script>

<template>
  <div>
    <p>Naam: {{ gebruiker.naam }}</p>
    <p>Leeftijd: {{ gebruiker.leeftijd }}</p>
    <button @click="verouder">Verouder</button>
  </div>
</template>

Tweewegsdatabinding met `v-model`

In Vue.js is v-model een handige directive die wordt gebruikt om two-way data binding te implementeren. Dit betekent dat wijzigingen in een HTML-element (zoals een input, checkbox, of textarea) automatisch de waarde in een data-eigenschap (variabele) in de Vue-component bijwerken en vice versa.

Wanneer je v-model op een element gebruikt:

Het HTML-element leest een waarde van een eigenschap in de Vue-component.
Het HTML- element schrijft veranderingen (zoals gebruikersinvoer) terug naar die eigenschap.

Voorbeeld: Naam invoeren

<script setup lang="ts">
import { ref } from 'vue';

const naam = ref('');
</script>

<template>
  <div>
    <input v-model="naam" placeholder="Voer je naam in" />
    <p>Je naam is: {{ naam }}</p>
  </div>
</template>

Belangrijke bronnen v-model:

Conditionele rendering met `v-if`

Met v-if kun je elementen alleen weergeven als een bepaalde voorwaarde waar is.

Voorbeeld: Element tonen/verbergen

<script setup lang="ts">
import { ref } from 'vue';

const zichtbaar = ref(false);

const schakel = () => {
  zichtbaar.value = !zichtbaar.value;
};
</script>

<template>
  <div>
    <button @click="schakel">Schakel zichtbaarheid</button>
    <p v-if="zichtbaar">Dit element is zichtbaar!</p>
  </div>
</template>

Lijsten renderen met `v-for`

Met v-for kun je herhalende elementen in de DOM renderen op basis van een array.

Voorbeeld: Een lijst van fruit

<script setup lang="ts">
const fruit = ['Appel', 'Banaan', 'Kers'];
</script>

<template>
  <ul>
    <li v-for="(stuk, index) in fruit" :key="index">{{ stuk }}</li>
  </ul>
</template>

Event Handlers

In Vue 3 worden event handlers gebruikt om gebruikersinteracties, zoals klikken, invoer, en het bewegen van de muis, af te handelen. Dit gebeurt door het koppelen van events aan methodes of inline code in je component.

`@click` Event Handler

De @click directive wordt gebruikt om een methode uit te voeren wanneer een element wordt aangeklikt.

Voorbeeld:

<template>
  <button @click="sayHello">Klik mij</button>
</template>

<script setup>
function sayHello() {
  alert("Hallo, wereld!");
}
</script>

@click is een afkorting voor v-on:click.
sayHello is een functie die wordt uitgevoerd wanneer de knop wordt aangeklikt.

Event Handlers met Inline Code

Je kunt ook inline JavaScript gebruiken in plaats van een methode. Dit kan handig zijn voor eenvoudige acties zoals het verhogen van een teller.

Voorbeeld:

<template>
  <button @click="count++">Klik om te verhogen: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

count++ verhoogt de waarde van de teller direct.
ref(0) wordt gebruikt om een reactieve variabele te maken in Vue.

Event met Parameters

Wil je parameters doorgeven aan een methode? Gebruik dan een arrow function.

Voorbeeld:

<template>
  <button @click="() => greet('Vue')">Zeg Hallo</button>
</template>

<script setup>
function greet(name) {
  alert(`Hallo, ${name}!`);
}
</script>

() => greet('Vue') is een inline arrow function die de parameter 'Vue' doorgeeft aan de greet-functie.

Meerdere Events

Je kunt meerdere events koppelen aan een enkel element, bijvoorbeeld om acties te ondernemen bij het focussen of verliezen van focus.

Voorbeeld:

<template>
  <input 
    @focus="onFocus" 
    @blur="onBlur" 
    placeholder="Focus op mij"
  />
</template>

<script setup>
function onFocus() {
  console.log("Input is in focus!");
}

function onBlur() {
  console.log("Input is niet meer in focus.");
}
</script>

@focus wordt uitgevoerd wanneer het element in focus komt.
@blur wordt uitgevoerd wanneer het element de focus verliest.

Event Object Gebruiken

Je kunt het event object gebruiken door het expliciet door te geven aan je functie.

Voorbeeld:

<template>
  <button @click="logEvent">Klik om event te loggen</button>
</template>

<script setup>
function logEvent(event) {
  console.log("Event Type:", event.type);
}
</script>

event bevat informatie over het event, zoals het type en het doelwit.

Modifier Keys

Modifiers in Vue maken het mogelijk om gedrag aan te passen of events te filteren. Hier zijn twee veelgebruikte modifiers:

@click.prevent: Voorkomt de standaard actie van een event.
@click.stop: Voorkomt dat het event omhoog "bubbelt" naar bovenliggende elementen.

Voorbeeld:

<template>
  <form @submit.prevent="submitForm">
    <input type="text" placeholder="Type iets" />
    <button type="submit">Verzend</button>
  </form>
</template>

<script setup>
function submitForm() {
  alert("Formulier verzonden!");
}
</script>

@submit.prevent voorkomt dat de browser de standaardactie uitvoert bij het indienen van het formulier (zoals een paginavernieuwing).

<script setup> vs. <script>​

Vergelijking: Met en zonder <script setup>​

Klassieke benadering: Zonder <script setup>​

2. Moderne benadering: Met <script setup>​

Belangrijke concepten in Vue 3​

Reactiviteit met ref​

Wat is een ref?​

Wanneer gebruik je ref?​

Reactieve arrays en objecten​

Verschil tussen ref en reactive​

Tweewegsdatabinding met v-model​

Conditionele rendering met v-if​

Lijsten renderen met v-for​

Event Handlers​

@click Event Handler​

Event Handlers met Inline Code​

Event met Parameters​

Meerdere Events​

Event Object Gebruiken​

Modifier Keys​

`<script setup>` vs. `<script>`

Vergelijking: Met en zonder `<script setup>`

Klassieke benadering: Zonder `<script setup>`

2. Moderne benadering: Met `<script setup>`

Belangrijke concepten in Vue 3

Reactiviteit met `ref`

Wat is een `ref`?

Wanneer gebruik je `ref`?

Reactieve arrays en objecten

Verschil tussen `ref` en `reactive`

Tweewegsdatabinding met `v-model`

Conditionele rendering met `v-if`

Lijsten renderen met `v-for`

Event Handlers

`@click` Event Handler

Event Handlers met Inline Code

Event met Parameters

Meerdere Events

Event Object Gebruiken

Modifier Keys