Denken in Code

1. Wat moet je maken?

Voordat je begint met programmeren, moet je eerst begrijpen wat de opdracht van je vraagt.

Stel jezelf drie vragen:

• Wat moet de gebruiker zien?
• Wat moet de gebruiker kunnen doen?
• Wat verandert er wanneer de gebruiker iets doet?

2. Knip het probleem in stukjes → Componenten

Een component in Vue is een herbruikbaar blokje UI in een .vue-bestand. Elk component heeft één taak.

• Gebruik een component als je iets vaker nodig hebt
• Gebruik een component als iets visueel bij elkaar hoort
• Splits grote componenten op

<!-- Slecht: 1 gigantisch component -->
<template>
  <!-- 300 regels template... -->
</template>

<!-- Beter: losse componenten -->
<!-- Header.vue -->
<template><h1>Titel</h1></template>

<!-- Card.vue -->
<template><section>Kaartje</section></template>

<!-- Page.vue -->
<template>
  <Header />
  <Card />
</template>

3. Wat verandert? → Dat is State

In Vue gebruik je ref() voor state — alleen voor dingen die verdwijnen, verschijnen, wijzigen of reageren op acties.

• Zichtbaarheid (modal open/dicht)
• Input waardes
• Een lijst die groeit/krimpt
• Iets dat verandert door een klik

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

const count = ref(0)
</script>

<template>
  <section>
    <p>{{ count }}</p>
    <button @click="count++">+</button>
  </section>
</template>

4. Teken of beschrijf de Flow

De flow is: actie → state → render

Voorbeeld (modal):

• Gebruiker klikt op knop
• open.value = true
• Vue detecteert de wijziging automatisch (reactivity)
• Modal wordt zichtbaar

5. Schrijf eerst Pseudo-code → daarna pas echte code

// Pseudo-code
- Start met een teller op 0
- Bij klikken: teller + 1
- Toon teller

→ Vue code:

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

const count = ref(0)
</script>

<template>
  {{ count }}
  <button @click="count++">+</button>
</template>

Voorbeeld: Hoe pak je een opdracht aan?

Stap 1 – Wat moet de gebruiker zien?

• Een input
• Een button
• Een lijst van taken

Stap 2 – Wat moet de gebruiker kunnen doen?

• Tekst typen
• Op 'Toevoegen' klikken

Stap 3 – Wat verandert?

• De ingevoerde tekst (ref)
• De lijst met taken (ref)

Stap 4 – Flow uitschrijven

• Gebruiker typt → input wordt automatisch geüpdatet via v-model
• Gebruiker klikt op toevoegen
• tasks krijgt een nieuwe taak erbij
• Vue rendert de lijst opnieuw (automatisch)

Stap 5 – Pseudo-code

- Maak ref: input = ""
- Maak ref: tasks = []
- Bij veranderen input → v-model regelt dit automatisch
- Bij klikken → voeg input toe aan tasks
- Toon tasks met v-for
- Leeg input

Stap 6 – Structuur van componenten

• TaskInput.vue (input + button)
• TaskList.vue (lijst tonen)
• App.vue → bevat de state

Finale Code

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

const input = ref('')
const tasks = ref([])

const addTask = () => {
  if (input.value.trim()) {
    tasks.value.push(input.value)
    input.value = ''
  }
}
</script>

<template>
  <div>
    <input
      v-model="input"
      placeholder="Nieuwe taak"
    />
    <button @click="addTask">Toevoegen</button>

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