Deutsch

VueJS Tutorial

VueJS-Tutorial: Einstieg in Vue.js

Hallo, ambitionierte Web-Entwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von Vue.js zu sein. Als jemand, der seit über einem Jahrzehnt Informatik unterrichtet, kann ich Ihnen sagen, dass Vue.js eines der einsteigerfreundlichsten Frameworks da draußen ist. Also tauchen wir ein und erschaffen wir gemeinsam ein bisschen Magie!

VueJS - Home

Was ist Vue.js?

Vue.js ist ein progressives JavaScript-Framework zur Erstellung von Benutzeroberflächen. Aber was bedeutet das in einfacher Sprache? Stellen Sie sich vor, Sie bauen ein Haus. Vue.js ist wie ein Satz vorgefertigter Wände und Räume, die Sie leicht zusammenstecken können, um Ihr Traumhaus zu erstellen. Es macht das Erstellen komplexer Webanwendungen so einfach wie das Zusammenbauen von LEGO-Steinen!

Warum Vue.js?

  1. Leicht zu erlernen
  2. Flexibel und skalierbar
  3. Great performance
  4. Awesome community support

Voraussetzungen

Bevor wir loslegen, stellen wir sicher, dass wir alles Notwendige haben:

  • Grundverständnis von HTML und CSS
  • Vertrautheit mit JavaScript (machen Sie sich keine Sorgen, wenn Sie kein Experte sind!)
  • Ein moderner Webbrowser (ich empfehle Chrome oder Firefox)
  • Ein Texteditor (VS Code ist mein persönlicher Favorit)

Erstellung Ihres ersten Vue.js-Projekts

Lassen Sie uns mit einer einfachen "Hallo, Vue!"-Anwendung beginnen. Zuerst müssen wir Vue.js in unser Projekt einbinden. Wir können dies tun, indem wir einen Script-Tag zu unserer HTML-Datei hinzufügen.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mein erstes Vue App</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ nachricht }}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                nachricht: 'Hallo, Vue!'
            }
        })
    </script>
</body>
</html>

Lassen Sie uns das einmal auseinandernehmen:

  1. Wir binden die Vue.js-Bibliothek über einen CDN-Link ein.
  2. Wir erstellen ein <div> mit der ID "app". Hier wird unsere Vue-Anwendung leben.
  3. Innerhalb des <div>, verwenden wir {{ nachricht }}. Das nennt man Interpolation und so zeigen wir Daten in Vue an.
  4. In unserem <script>-Tag erstellen wir eine neue Vue-Instanz und weisen ihr das Element mit der ID "app" zu.
  5. Wir definieren ein data-Objekt mit einer nachricht-Eigenschaft. Das ist die Daten, die Vue in unserer App verwenden wird.

Wenn Sie diese Datei speichern und im Browser öffnen, sollten Sie "Hallo, Vue!" auf der Seite sehen. Gratulation! Sie haben gerade Ihre erste Vue.js-Anwendung erstellt!

Vue-Direktiven: Interaktivität hinzufügen

Nun, da wir die Grundlagen kennen, machen wir unsere App ein bisschen interaktiver. Vue stellt uns Direktiven zur Verfügung - spezielle Attribute, die Vue Anweisungen geben, wie es sich verhalten soll. Sehen wir uns einige gängige an:

v-model: Zweifache Datenbindung

v-model erstellt eine zweifache Bindung zwischen Formularfeldern und Anwendungsstatus. Lassen Sie uns unsere App um ein Eingabefeld erweitern:

<div id="app">
    <input v-model="nachricht">
    <p>Die Nachricht ist: {{ nachricht }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            nachricht: 'Hallo, Vue!'
        }
    })
</script>

Jetzt wird die Nachricht in Echtzeit aktualisiert, wenn Sie in das Eingabefeld tippen. Es ist wie Magie, oder?

v-if und v-else: Bedingte Darstellung

Manchmal möchten wir Elemente basierend auf einer Bedingung anzeigen oder ausblenden. Hier kommen v-if und v-else ins Spiel:

<div id="app">
    <button @click="umschaltenSichtbarkeit">Nachricht umschalten</button>
    <p v-if="sichtbar">Jetzt siehst du mich!</p>
    <p v-else>Jetzt siehst du mich nicht!</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            sichtbar: true
        },
        methods: {
            umschaltenSichtbarkeit() {
                this.sichtbar = !this.sichtbar
            }
        }
    })
</script>

In diesem Beispiel verwenden wir v-if und v-else, um zwischen zwei Nachrichten umzuschalten. Die @click-Direktive ist eine Abkürzung für v-on:click, die auf Klickereignisse hört.

v-for: Listen Darstellung

Wenn wir eine Liste von Elementen anzeigen müssen, ist v-for unsere gå-to-Direktive:

<div id="app">
    <ul>
        <li v-for="frucht in früchte">{{ frucht }}</li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            früchte: ['Apfel', 'Banane', 'Kirsche', 'Durian']
        }
    })
</script>

Dies rendert eine Liste von Früchten. Es ist so einfach!

Methoden in Vue

Methoden sind Funktionen, die wir verwenden können, um unserem Vue-Instanzen Verhalten hinzuzufügen. Lassen Sie uns einen einfachen Zähler erstellen:

<div id="app">
    <p>Zähler: {{ zähler }}</p>
    <button @click="inkrementieren">Inkrementieren</button>
    <button @click="deCREMENTIEREN">Dezrementieren</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            zähler: 0
        },
        methods: {
            inkrementieren() {
                this.zähler++
            },
            deCREMENTIEREN() {
                this.zähler--
            }
        }
    })
</script>

Hier haben wir zwei Methoden definiert: inkrementieren und deCREMENTIEREN. Diese Methoden werden aufgerufen, wenn die entsprechenden Buttons geklickt werden, und aktualisieren unsere zähler-Daten Eigenschaft.

Berechnete Eigenschaften: Schlaue Berechnungen

Berechnete Eigenschaften sind wie super-aufgeladene Daten Eigenschaften. Sie können komplexe Berechnungen durchführen und basierend auf ihren Abhängigkeiten zwischengespeichert werden. Sehen wir uns ein Beispiel an:

<div id="app">
    <input v-model="vorname">
    <input v-model="nachname">
    <p>Volle Name: {{ vollerName }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            vorname: '',
            nachname: ''
        },
        computed: {
            vollerName() {
                return this.vorname + ' ' + this.nachname
            }
        }
    })
</script>

Hier ist vollerName eine berechnete Eigenschaft, die vorname und nachname kombiniert. Sie wird automatisch aktualisiert, wenn einer ihrer Abhängigkeiten sich ändert.

Zusammenfassung der Vue.js-Methoden

Hier ist eine Tabelle, die die Vue.js-Methoden zusammenfasst, die wir behandelt haben:

Methode Beschreibung Beispiel
data Enthält die Daten für die Vue-Instanz data: { nachricht: 'Hallo' }
methods Enthält Funktionen, um Verhalten hinzuzufügen methods: { grüßen() { alert('Hi!') } }
computed Gespeicherte Eigenschaften, die aktualisiert werden, wenn Abhängigkeiten sich ändern computed: { vollerName() { return this.vorname + ' ' + this.nachname } }
el Gibt das Element an, auf dem die Vue-Instanz montiert wird el: '#app'

Schlussfolgerung

Glückwunsch! Sie haben Ihre ersten Schritte in die wunderbare Welt von Vue.js gemacht. Wir haben die Grundlagen der Erstellung einer Vue-Instanz, der Verwendung von Direktiven für Interaktivität und der Hinzufügung von Verhalten mit Methoden und berechneten Eigenschaften behandelt.

Erinnern Sie sich daran, dass das Lernen von Code wie das Lernen einer neuen Sprache ist - es erfordert Übung und Geduld. Lassen Sie sich nicht entmutigen, wenn alles nicht sofort klickt. Halten Sie experimentieren, bauen und vor allem Spaß haben!

In unserer nächsten Lektion tauchen wir tiefer in Komponenten ein, die Bausteine größerer Vue-Anwendungen. Bis dahin, fröhliches Coden!

Credits: Image by storyset

 
Nächstes Tutorial:
VueJS - Überblick