Vue.js Grundlagen

6 Kernkonzepte

Die wichtigsten Vue.js-Konzepte für reaktive Webanwendungen: Vue-Instanz · Reaktivität · Direktiven · Props & Events · Lifecycle · Composition API Vue.js ist ein progressives Framework für den Aufbau von Benutzeroberflächen. Diese Cheatsheet fasst die grundlegenden Konzepte für den Einstieg zusammen – von der Vue-Instanz über Direktiven bis zur Composition API.

Vue-Instanz & Reaktivität – Grundgerüst und Daten

createApp · data · ref · reactive

// Options API const app = Vue.createApp({ data() { return { message: 'Hallo Welt!' }; } }); app.mount('#app');

Vue-Instanz ist das Herz jeder Vue-Anwendung. Reaktivität bedeutet, dass Änderungen an Daten automatisch das DOM aktualisieren – mit ref und reactive (Composition API) oder data() (Options API).

Beispiele

// Options API (Vue 2 & 3)

const app = Vue.createApp({

data() {

return { count: 0, name: 'Anna' };

methods: {

increment() {

this.count++;

}

});

// Composition API (Vue 3)

import { ref, reactive } from 'vue';

const count = ref(0); // Reaktiver Wert (primitiv)

const state = reactive({ name: 'Anna' }); // Reaktives Objekt

count.value++; // Zugriff auf ref-Wert

Tipp: Die Options API ist klassisch und einsteigerfreundlich. Die Composition API (Vue 3) ist flexibler und besser für komplexe Komponenten geeignet – beide können je nach Projekt gewählt werden.

Direktiven – v-bind, v-on, v-if, v-for

v-bind · v-on · v-if · v-for · v-model

<div v-bind:class="{ active: isActive }"> <span v-if="visible">Sichtbar</span> <li v-for="item in items" :key="item.id">{ item.name }</li> <input v-model="message" />

Direktiven sind spezielle Attribute mit v--Präfix, die reaktive DOM-Manipulationen ermöglichen. Sie sind das Herzstück des Vue-Templating.

Wichtige Direktiven

Direktive	Beschreibung	Kurzform
v-bind	Bindet Attribute an Daten	:
v-on	Event-Listener	@
v-if / v-else-if / v-else	Bedingtes Rendern	-
v-for	Listen-Rendering	-
v-model	Zwei-Wege-Bindung für Formulare	-
v-show	Sichtbarkeit umschalten (CSS display)	-
v-html	HTML-Inhalt einfügen	-
v-once	Nur einmal rendern	-

Beispiele

<button @click="handleClick">Klick mich</button>

<p v-if="isLoggedIn">Eingeloggt</p>

<p v-show="isVisible">Sichtbar</p>

{ index }: { item.name }

</li>

Tipp: Verwenden Sie v-if für seltene Änderungen und v-show für häufiges Toggeln. :key bei v-for ist essenziell für korrekte Aktualisierungen der Liste.

Komponenten & Reaktivität – Props, Events, Slots

props · emits · slots · defineProps

// Child.vue (Options API) export default { props: ['name'], emits: ['update'] }

Komponenten sind die Bausteine einer Vue-Anwendung. Props sind Daten von Eltern an Kinder, Events kommunizieren von Kindern an Eltern, Slots ermöglichen Content-Transklusion.

Beispiele

const props = defineProps({

name: { type: String, required: true },

age: { type: Number, default: 0 }

});

const emit = defineEmits(['update', 'delete']);

</script>

<p>{{ name }} ({{ age }} Jahre)</p>

<button @click="$emit('update', name)">Update</button>

</template>

<h1>Benutzerprofil</h1>

</template>

<p>Zusätzlicher Inhalt</p>

</Child>

</template>

Tipp: Mit <script setup> (Vue 3) wird der Code kompakter. Props und Emits werden mit defineProps und defineEmits deklariert – ohne export default.

Lifecycle-Hooks – Komponentenlebenzyklus

mounted · updated · unmounted · onMounted

// Options API export default { mounted() { console.log('Komponente gemountet'); } }

Lifecycle-Hooks ermöglichen es, Code zu bestimmten Zeitpunkten im Lebenszyklus einer Komponente auszuführen – beim Erstellen, Mounten, Aktualisieren und Zerstören.

Wichtige Lifecycle-Hooks

Hook	Beschreibung	Composition API
beforeCreate	Vor Instanzerstellung	-
created	Nach Instanzerstellung	-
beforeMount	Vor erstem Rendering	onBeforeMount
mounted	Nach erstem Rendering	onMounted
beforeUpdate	Vor DOM-Update	onBeforeUpdate
updated	Nach DOM-Update	onUpdated
beforeUnmount	Vor Zerstörung	onBeforeUnmount
unmounted	Nach Zerstörung	onUnmounted

Beispiele

// Options API

export default {

data() { return { user: null }; },

async mounted() {

const res = await fetch('/api/user');

this.user = await res.json();

}

// Composition API (Vue 3)

import { onMounted, onUnmounted } from 'vue';

onMounted(() => {

console.log('Gemountet');

const listener = () => console.log('Event');

window.addEventListener('resize', listener);

onUnmounted(() => {

window.removeEventListener('resize', listener);

});

Tipp: mounted ist ideal für API-Aufrufe oder DOM-Manipulationen. Cleanup (z.B. Event-Listener entfernen) sollte in unmounted (Options API) oder onUnmounted (Composition API) erfolgen.

Computed & Watcher – Reaktive Abhängigkeiten

computed · watch · watchEffect

// Options API computed: { fullName() { return this.firstName + ' ' + this.lastName; } }

Computed sind abgeleitete Werte, die automatisch aktualisiert werden, wenn sich ihre Abhängigkeiten ändern. Watcher reagieren auf Änderungen von Daten und führen Seiteneffekte aus.

Beispiele

import { ref, computed, watch, watchEffect } from 'vue';

const firstName = ref('Anna');

const lastName = ref('Schmidt');

// Computed: abgeleiteter Wert

const fullName = computed(() => {

return firstName.value + ' ' + lastName.value;

});

// Computed mit Getter und Setter

const fullName2 = computed({

get: () => firstName.value + ' ' + lastName.value,

set: (value) => {

const parts = value.split(' ');

firstName.value = parts[0];

lastName.value = parts[1] || '';

}

});

// Watch: auf spezifische Änderungen reagieren

watch(firstName, (newVal, oldVal) => {

console.log(`Vorname geändert von ${oldVal} zu ${newVal}`);

});

// watchEffect: automatisch alle Abhängigkeiten tracken

watchEffect(() => {

console.log(`Name: ${firstName.value} ${lastName.value}`);

});

// Watch mit Optionen (immediate, deep)

watch(user, handleUserChange, { immediate: true, deep: true });

Tipp: Computed sind cached – sie werden nur neu berechnet, wenn sich Abhängigkeiten ändern. Watcher sind für Seiteneffekte (API-Aufrufe, Logging) gedacht. watchEffect trackt automatisch alle abhängigen Refs.

Composition API – setup() und <script setup>

setup · ref · reactive · computed · watch

// <script setup> (Vue 3, empfohlen) <script setup> import { ref, reactive, computed } from 'vue'; const count = ref(0); const double = computed(() => count.value * 2); </script>

Composition API ist der moderne Ansatz in Vue 3, der Logik besser organisiert und wiederverwendbar macht. <script setup> ist die empfohlene Syntax für Single-File-Components.

Beispiele

import { ref, computed, watch } from 'vue';

import { useCounter } from './composables/useCounter';

// Reaktive Daten

const count = ref(0);

const message = ref('');

// Computed

const doubleCount = computed(() => count.value * 2);

// Watcher

watch(count, (newVal) => {

console.log(`Count: ${newVal}`);

});

// Methoden

function increment() {

count.value++;

}

function reset() {

count.value = 0;

}

// Benutzerdefinierte Composables

const { count, increment, decrement } = useCounter();

</script>

<p>Count: {{ count }} (doppelt: {{ doubleCount }})</p>

<button @click="reset">Reset</button>

</template>

// composables/useCounter.js

import { ref } from 'vue';

export function useCounter() {

const count = ref(0);

const increment = () => count.value++;

const decrement = () => count.value--;

return { count, increment, decrement };

}

Tipp: Die Composition API mit <script setup> ist der moderne Standard für Vue 3. Composables (wie useCounter) ermöglichen die Wiederverwendung von Logik über mehrere Komponenten hinweg.

Vue.js im Überblick

data Reaktive Daten
Options API

ref Reaktive Daten
Composition API

v-bind Attribute binden
: (Kurzform)

v-on Events binden
@ (Kurzform)

computed Abgeleitete Werte
Cached

watch Seiteneffekte
Reagieren auf Änderungen

Quick Summary

createApp

Vue-Instanz

ref

Reaktivität

v-bind

Direktiven

props

Komponenten

mounted

Lifecycle

setup

Composition API

v-bind:class="{ active: isActive }" · @click="handleClick" · v-for="item in items" :key="item.id"