Kapitel 5: Erstes Vue 3 Programm

📘 Lernziel: Vue 3 online ausprobieren und das erste Programm schreiben!

---

5.1 Online Editoren (Keine Installation nötig!)

Vorteile von Online-Editoren:

• ✅ Sofort loslegen
• ✅ Keine Installation
• ✅ Teilen mit anderen

Empfohlene Online-Editoren:

1. Vue SFC Playground

• Offiziell: https://play.vuejs.org/
• Unterstützt .vue Dateien
• Hot Module Replacement

2. CodePen

• https://codepen.io/
• Suche nach "Vue 3"
• Schnelles Prototyping

3. StackBlitz

• https://stackblitz.com/
• Vollständige Entwicklungsumgebung
• Kann als GitHub Repository exportiert werden

---

5.2 Erstes Programm: "Hello Vue 3"

Schritt 1: Öffne https://play.vuejs.org/

Schritt 2: Ersetze den Code mit:

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

// Reaktive Variable
const message = ref('Hello Vue 3!')
const count = ref(0)

// Funktion
const increment = () => {
  count.value++
}
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Zähler: {{ count }}</p>
    <button @click="increment">Klick mich!</button>
  </div>
</template>

<style scoped>
h1 {
  color: #42b883;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

Schritt 3: Sieh dir das Ergebnis in der Vorschau an!

---

5.3 Code-Erklärung

Wichtige Konzepte:

1. <script setup>

• Composition API Syntax
• Kein export default nötig
• Variablen/Funktionen sind automatisch verfügbar

2. ref()

• Macht Variablen reaktiv
• Zugriff über .value (im Script)
• Template nutzt direkt den Namen

3. (Interpolation)

• Bindet Daten in das Template
• Zeigt Variablenwerte an

4. @click

• Event-Listener (Kurzform für v-on:click)
• Führt Funktion bei Klick aus

5. <style scoped>

• CSS gilt nur für diese Komponente
• Verhindert Style-Konflikte

---

5.4 Übung: Interaktive To-Do Liste (Einfach)

Ziel: Eine einfache To-Do Liste erstellen.

Code:

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

const newTodo = ref('')
const todos = ref(['Vue 3 lernen', 'Projekt erstellen'])

const addTodo = () => {
  if (newTodo.value.trim() !== '') {
    todos.value.push(newTodo.value)
    newTodo.value = ''
  }
}

const removeTodo = (index) => {
  todos.value.splice(index, 1)
}
</script>

<template>
  <div>
    <h1>Meine To-Do Liste</h1>
    <input 
      v-model="newTodo" 
      @keyup.enter="addTodo"
      placeholder="Neue Aufgabe..."
    />
    <button @click="addTodo">Hinzufügen</button>
    
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">Löschen</button>
      </li>
    </ul>
  </div>
</template>

Probier es aus!

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Online-Editoren für Vue 3 nutzen
• ✅ Erstes Vue 3 Programm geschrieben
• ✅ Grundlegende Konzepte verstanden (ref, , @click)
• ✅ Eine einfache To-Do Liste erstellt

🎯 Nächster Schritt: In Kapitel 6 lernst du, ein lokales Vue 3 Projekt mit create-vue zu erstellen!

---

← Zurück zu Kapitel 4: Node.js & npm/pnpmWeiter zu Kapitel 6: Vue 3 Projekt erstellen →