Modul 11b: Mit Vue.js starten

lock
Bevorstehend

Lerne Vue.js - das progressive Framework fĂĽr moderne Web-Apps

Ziele dieses Moduls
  • Sie koennen eine interaktive Web-App mit Vue.js erstellen und verstehen das Composition API Konzept
    Kreieren

Vue.js ist bekannt für seine sanfte Lernkurve und seine Flexibilität. Es kombiniert das Beste aus React und Angular und ist sehr beliebt bei Entwicklern.

Warum Vue.js?

Vorteile:

  • âś… 'Progressive Framework' - du kannst klein anfangen und erweitern
  • âś… Exzellente Dokumentation (eine der besten!)
  • âś… Single File Components (wie Svelte)
  • âś… Grosse Community und viele Plugins
  • âś… Wird von grossen Firmen wie Alibaba, GitLab, Nintendo verwendet

Schritt 1: Vue Playground erkunden

Ă–ffne play.vuejs.org - der offizielle Online-Editor fĂĽr Vue 3.

Eine einfache Vue-Komponente:

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

const name = ref('Welt')
const count = ref(0)

function increment() {
  count.value++  // Vue aktualisiert UI automatisch!
}
</script>

<template>
  <h1>Hallo {{ name }}!</h1>
  <p>Du hast {{ count }} mal geklickt.</p>
  <button @click="increment">+1</button>
</template>

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

Vue-Besonderheiten:

  • ref(): Macht einen Wert reaktiv (in JS: count.value, im Template: {{ count }})
  • script setup: Moderne, kĂĽrzere Syntax (Composition API)
  • Template-Syntax: {{ variable }} fĂĽr Interpolation
  • Event-Binding: @click statt on:click
  • Scoped Styles: CSS gilt nur fĂĽr diese Komponente

Challenge

Projekt: Meine Lieblingsfilme-App

Baue die gleiche App wie bei Svelte, aber mit Vue:

Features:

  • Liste von Filmen anzeigen
  • Film hinzufĂĽgen (Formular)
  • Film löschen
  • Nach Genre filtern
  • Responsive Design

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

const movies = ref([
  { id: 1, title: 'Inception', year: 2010, genre: 'Sci-Fi' },
  { id: 2, title: 'The Matrix', year: 1999, genre: 'Sci-Fi' },
  { id: 3, title: 'Pulp Fiction', year: 1994, genre: 'Crime' },
])

const newTitle = ref('')
const newYear = ref('')
const newGenre = ref('Sci-Fi')
const filterGenre = ref('Alle')

function addMovie() {
  if (newTitle.value && newYear.value) {
    movies.value.push({
      id: Date.now(),
      title: newTitle.value,
      year: parseInt(newYear.value),
      genre: newGenre.value
    })
    newTitle.value = ''
    newYear.value = ''
  }
}

function deleteMovie(id) {
  movies.value = movies.value.filter(m => m.id !== id)
}

const filteredMovies = computed(() => {
  return filterGenre.value === 'Alle' 
    ? movies.value 
    : movies.value.filter(m => m.genre === filterGenre.value)
})
</script>

<template>
  <h1>Meine Lieblingsfilme</h1>

  <div class="filter">
    <label>
      Genre: 
      <select v-model="filterGenre">
        <option>Alle</option>
        <option>Sci-Fi</option>
        <option>Crime</option>
        <option>Drama</option>
      </select>
    </label>
  </div>

  <div class="movies">
    <div v-for="movie in filteredMovies" :key="movie.id" class="movie-card">
      <h3>{{ movie.title }}</h3>
      <p>{{ movie.year }} • {{ movie.genre }}</p>
      <button @click="deleteMovie(movie.id)">Löschen</button>
    </div>
  </div>

  <form @submit.prevent="addMovie">
    <h2>Film hinzufĂĽgen</h2>
    <input v-model="newTitle" placeholder="Titel" required>
    <input v-model="newYear" type="number" placeholder="Jahr" required>
    <select v-model="newGenre">
      <option>Sci-Fi</option>
      <option>Crime</option>
      <option>Drama</option>
    </select>
    <button type="submit">HinzufĂĽgen</button>
  </form>
</template>

<style scoped>
  /* Dein CSS hier! */
</style>

Note

Vue-Spezialitäten im Code:

  • v-for - Loop ĂĽber Arrays (braucht :key!)
  • v-model - Two-way Data Binding
  • computed() - Berechnete Properties (automatisch gecached)
  • @submit.prevent - Event + Modifier

Tutorial: Das offizielle Vue-Tutorial ist hervorragend: vuejs.org/tutorial (ca. 1-2 Stunden)

Unterschied zu Svelte: Vue braucht .value im JavaScript, Svelte nicht. Vue hat computed(), Svelte hat $:.