Grundlagen
Alle ansehen- 01 Was ist Svelte? — Compiler-Framework statt Laufzeit-Bibliothek
- 02 Svelte vs. React, Vue und Angular — Direkter Vergleich der vier großen UI-Frameworks
- 03 Svelte 5 vs. Svelte 4 — Was sich mit Svelte 5 geändert hat
- 04 Setup mit SvelteKit — Projekt mit sv create und SvelteKit aufsetzen
- 05 Erste Komponente — Schritt für Schritt zur ersten .svelte-Komponente
- 06 Aufbau einer .svelte-Datei — Script, Markup und Style im Detail
Reactivity (Runes)
Alle ansehen- 01 Einführung in Runes — Übersicht über alle Runes und ihre Regeln
- 02 $state — Reaktive Variablen mit $state
- 03 $derived — Aus $state-Werten abgeleitete Werte
- 04 $effect — Side Effects bei reaktiven Änderungen
- 05 $props — Komponenten-Properties auslesen mit $props
- 06 $bindable — Props als zwei-weg-bindbar markieren
- 07 $inspect — Reaktive Werte debuggen
- 08 Legacy-Reactivity (Svelte 4) — Wie Reaktivität in Svelte 4 funktionierte
Components
Alle ansehen- 01 Einführung Components — Was Komponenten sind und wie sie verwendet werden
- 02 Props — Daten von Eltern zu Kindern weiterreichen
- 03 Events — DOM-Events und Component-Events
- 04 Snippets statt Slots — Slots ersetzt durch flexiblere Snippets
- 05 Component-Bindings — bind:value und bind:this auf Komponenten
- 06 Composition — Komposition statt Vererbung
- 07 Dynamic Components — Komponenten zur Laufzeit wechseln
- 08 Special Elements — Spezielle svelte:-Tags
Template-Syntax
Alle ansehen- 01 Text-Expressions — Werte und Ausdrücke im Markup einbinden
- 02 {#if} – Bedingungen — Conditional Rendering mit {#if} und {:else}
- 03 {#each} – Schleifen — Listen mit {#each} rendern, Keys verwenden
- 04 {#await} – Promises im Template — Loading-, Erfolgs- und Fehler-Zustand für Promises
- 05 {#key} – Block bei Wert-Wechsel neu erzeugen — Block neu mounten bei Wert-Änderung
- 06 Special Tags – @html, @const, @render, @debug — @html, @const, @render, @debug