Deutsch

VueJS Tutorial

VueJS - Einführung

Hallo da draußen, angehende 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 Programmierung unterrichtet, kann ich Ihnen sagen, dass Vue.js eines der einsteigerfreundlichsten Frameworks da draußen ist. Also tauchen wir ein und entdecken wir, warum Vue.js zu einem Favoriten unter Entwicklern weltweit geworden ist!

VueJS - Introduction

Was ist Vue.js?

Vue.js ist ein progressives JavaScript-Framework zur Erstellung von Benutzeroberflächen. Ich weiß, das klingt vielleicht ein bisschen einschüchternd, aber denken Sie daran wie an eine Werkzeugkiste voller praktischer Gadgets, die das Erstellen interaktiver Websites zum Kinderspiel machen.

Als ich Vue.js zum ersten Mal traf, erinnerte es mich an das Zusammenbauen von LEGO-Steinen. Sie beginnen mit kleinen, handhabbaren Teilen und bauen schrittweise etwas Großartiges. Das ist die Schönheit von Vue.js – es ist zugänglich, vielseitig und leistungsstark.

Warum Vue.js wählen?

  1. Leicht zu erlernen: Wenn JavaScript eine Sprache wäre, dann wäre Vue.js seine freundliche Mundart, die leicht zu erlernen ist.
  2. Flexibel: Es passt sich Ihren Bedürfnissen an, egal, ob Sie ein einfaches Widget oder eine komplexe Anwendung erstellen.
  3. Leistungsfähigkeit: Es ist leichtgewichtig und schnell, wie ein Sportauto, aber für Web-Entwicklung.
  4. Unterstützende Gemeinschaft: Es ist immer jemand da, der hilft, wenn Sie feststecken.

Nun, lassen Sie uns mit ein bisschen Code herumspielen!

Deine erste Vue.js Anwendung

Beispiel

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

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

Ausgabe

Wenn Sie diese HTML-Datei in Ihrem Browser öffnen, werden Sie sehen:

Hallo, Vue!

Konsoldetails

Wenn Sie die Konsole Ihres Browsers öffnen, werden Sie keine Fehler sehen. Das ist ein guter Start!

Den Code zerlegen

Lassen Sie uns diesen Code wie in einem spaßigen, nerdigen Anatomieunterricht zerlegen:

  1. HTML-Struktur: Wir haben ein einfaches HTML-Dokument. Nichts Schlimmes hier!

  2. Vue.js-Skript:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    Diese Zeile ist so, als ob wir Vue.js zu unserer Party einladen. Sie lädt die Vue.js-Bibliothek von einem Content Delivery Network (CDN).

  3. Der App-Container:

    <div id="app">
{{ nachricht }}
</div>

    Diese <div> ist, wo unsere Vue-App leben wird. Die doppelten geschweiften Klammern {{ }} sind die Art und Weise von Vue, zu sagen: "Hey, ich werde hier einige dynamische Inhalte platzieren!"

  4. Vue-Instanz:

    var app = new Vue({
el: '#app',
data: {
nachricht: 'Hallo, Vue!'
}
})

    Hier geschieht die Magie! Lassen Sie uns es weiter aufschlüsseln:

  • new Vue({...}) erstellt eine neue Vue-Instanz.
  • el: '#app' sagt Vue, dass es sich mit dem DOM-Element verbinden soll, das die ID 'app' hat.
  • data: { nachricht: 'Hallo, Vue!' } ist so, als würde Vue einen Rucksack mit Daten tragen.

Interaktivität hinzufügen

Nun, lassen Sie uns ein bisschen Würze hinzufügen. Wir werden unsere App auf Benutzerinput reagieren lassen:

Beispiel

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

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

Ausgabe

Sie werden ein Eingabefeld mit "Hallo, Vue!" vorausgefüllt sehen, und darunter:

Die Nachricht ist: Hallo, Vue!

Wenn Sie im Eingabefeld tippen, wird die Nachricht darunter in Echtzeit aktualisiert!

Konsoldetails

Again, your console should be error-free. If you type app.nachricht in the console, you'll see the current value of the message.

Was passiert hier?

  1. v-model: Dies ist eine Vue-Direktive, die eine zweigleisige Datenbindung auf Formularfeldern erstellt. Es ist wie ein magischer Faden, der das Eingabefeld und unsere nachricht-Daten verbindet.

  2. Echtzeit-Updates: Vue aktualisiert automatisch das DOM, wenn die Daten sich ändern. Keine Notwendigkeit für manuelle DOM-Manipulation!

Methoden in Vue

Lassen Sie uns ein bisschen Verhalten in unsere App einfügen:

Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue mit Methoden</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ nachricht }}</p>
<button v-on:click="reverseMessage">Nachricht umkehren</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
nachricht: 'Hallo, Vue!'
},
methods: {
reverseMessage: function() {
this.nachricht = this.nachricht.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

Ausgabe

Sie werden sehen:

Hallo, Vue!
[Nachricht umkehren]

Wenn Sie auf die Schaltfläche klicken, wird die Nachricht umgekehrt!

Konsoldetails

Versuchen Sie, app.reverseMessage() in der Konsole einzutippen. Es wird die Nachricht umkehren, genau wie das Klicken auf die Schaltfläche!

Methoden verstehen

  1. methods-Objekt: Hier definieren wir Funktionen, die unserem App Verhalten hinzufügen.

  2. v-on:click: Diese Direktive hängt einen Ereignislistener an die Schaltfläche. Wenn Sie darauf klicken, wird unsere reverseMessage-Methode aufgerufen.

  3. this.nachricht: Innerhalb einer Vue-Methode bezieht sich this auf die Vue-Instanz, was es uns ermöglicht, unsere Daten zu lesen und zu ändern.

Vue's Reaktivität in Aktion

Was wir gerade gesehen haben, ist Vue's Reaktivitätssystem am Werk. Wenn sich Daten ändern, aktualisiert Vue automatisch das DOM. Es ist wie ein aufmerksamer Assistent, der Ihre Whiteboard-Notizen sofort aktualisiert, wenn Sie Ihre Notizen ändern.

Schlussfolgerung

Herzlichen Glückwunsch! Sie haben gerade Ihre ersten Schritte in die wunderbare Welt von Vue.js gemacht. Wir haben die Grundlagen der Erstellung einer Vue-Instanz, der Arbeit mit Daten und dem Hinzufügen von Interaktivität mit Methoden behandelt.

Denken Sie daran, das Lernen von Code ist wie das Lernen von Kochen. Sie beginnen mit einfachen Rezepten (wie unseren Beispielen) und bevor Sie es wissen, erstellen Sie komplexe, köstliche Anwendungen, die jeden beeindrucken!

In unserer nächsten Lektion werden wir mehr Vue-Funktionen wie berechnete Eigenschaften und Lebenszyklushaken erkunden. Bis dahin, experimentieren Sie weiter mit dem, was Sie gelernt haben. Versuchen Sie, Nachrichten zu ändern, mehr Datenproperties hinzuzufügen oder neue Methoden zu erstellen. Je mehr Sie spielen, desto mehr lernen Sie!

Frohes Coden, zukünftige Vue-Meister! ??‍??‍?

Abgedeckte Vue.js-Konzepte Beschreibung
Vue-Instanz Das Herz einer Vue-Anwendung, erstellt mit new Vue({...})
el Verbindet die Vue-Instanz mit einem DOM-Element
data Objekt, das reaktive Daten Eigenschaften enthält
{{ }} Mustache-Syntax für Text-Interpolation
v-model Direktive für zweigleisige Datenbindung
methods Objekt, das Methoden enthält, um Verhalten hinzuzufügen
v-on Direktive zum Hinzufügen von Ereignislistenern

Credits: Image by storyset

Vorheriges Tutorial:
VueJS - Umgebungssetup
Nächstes Tutorial:
VueJS - Instanzen