VueJS - Template: Ein Anfängerleitfaden

Hallo da, zukünftiger Vue.js-Superstar! Ich freue mich sehr, dein Guide auf dieser aufregenden Reise in die Welt der Vue.js-Templates zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich dir versichern, dass Vue.js eines der einsteigerfreundlichsten Frameworks da draußen ist. Also, schnall dich an und tauchen wir ein!

Was ist eine Vue.js-Template?

Bevor wir mit dem Coden beginnen, lassen wir uns darstellen, was eine Template in Vue.js ist. Stell dir vor, es ist das Skelett deiner Webseite - es ist der Ort, an dem du die Struktur deines HTML definiert und etwas Vue.js-Magie hinzufügst, um es dynamisch und interaktiv zu machen.

Grundstruktur

Hier ist eine einfache Vue.js-Template:

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

In diesem Beispiel ist {{ nachricht }} eine spezielle Syntax in Vue.js genannt "Interpolation". Es ist wie ein Platzhalter, den Vue.js durch tatsächliche Daten ersetzen wird.

Sehen wir es in Aktion:

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

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

Wenn du diesen Code ausführst, siehst du "Hallo, Vue!" auf deiner Seite. Magie, oder? Das {{ nachricht }} in der Template wird durch den Wert von nachricht in unserer Vue-Instanz-Daten ersetzt.

Direktiven: Vue's spezielle Anweisungen

Nun, lassen wir uns über Direktiven unterhalten. Diese sind spezielle Attribute, die mit v- beginnen und Vue.js Anweisungen geben, wie es sich verhalten soll. Sie sind wie kleine Zauberer, die auf dein HTML-Zauber sprayen!

v-bind: Dynamische Attribute

Die v-bind-Direktive wird verwendet, um ein Attribut dynamisch an einen Ausdruck zu binden. Sie ist so häufig, dass es sogar eine Abkürzung dafür gibt: :.

<div id="app">
<a v-bind:href="url">Klicke mich!</a>
<!-- Abkürzung -->
<a :href="url">Klicke mich!</a>
</div>

<script>
new Vue({
el: '#app',
data: {
url: 'https://vuejs.org/'
}
})
</script>

In diesem Beispiel wird das href-Attribut des <a>-Tags dynamisch auf den Wert von url in unseren Vue-Instanz-Daten gesetzt.

v-if, v-else-if, v-else: Bedingte Darstellung

Diese Direktiven erlauben es dir, Elemente basierend auf der Wahrheit des Ausdrucks bedingt darzustellen.

<div id="app">
<p v-if="gesehen">Jetzt siehst du mich</p>
<p v-else>Jetzt siehst du mich nicht</p>
</div>

<script>
new Vue({
el: '#app',
data: {
gesehen: true
}
})
</script>

Versuche gesehen auf false zu ändern und beobachte die Magie!

v-for: Listen-Darstellung

Die v-for-Direktive wird verwendet, um eine Liste von Elementen basierend auf einem Array darzustellen.

<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Lerne JavaScript' },
{ text: 'Lerne Vue' },
{ text: 'Baue etwas Awesome' }
]
}
})
</script>

Dies wird eine Liste von Todos darstellen. Jedes <li>-Element wird für jedes Element im todos-Array erstellt.

Ereignisverarbeitung mit v-on

Die v-on-Direktive wird verwendet, um auf DOM-Ereignisse zu hören und einige JavaScript auszuführen, wenn sie ausgelöst werden. Sie ist so nützlich, dass sie sogar eine Abkürzung hat: @.

<div id="app">
<p>{{ nachricht }}</p>
<button v-on:click="reverseMessage">Nachricht umkehren</button>
<!-- Abkürzung -->
<button @click="reverseMessage">Nachricht umkehren</button>
</div>

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

Klicke auf den Button und beobachte, wie deine Nachricht eine Salto macht!

Zweifach-Binding mit v-model

Die v-model-Direktive erstellt eine zweifach-Binding auf Formular-Eingabeelementen oder Komponenten.

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

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

Tippe in das Eingabefeld und sieh die Nachricht in Echtzeit aktualisieren. Es ist wie Magie, aber besser - es ist Vue.js!

Berechnete Eigenschaften und Beobachter

Berechnete Eigenschaften

Berechnete Eigenschaften sind wie super-gestärkte Daten-Eigenschaften. Sie sind Eigenschaften, die basierend auf anderen Eigenschaften berechnet werden.

<div id="app">
<p>Originalnachricht: "{{ nachricht }}"</p>
<p>Berechnete umgekehrte Nachricht: "{{ umgekehrteNachricht }}"</p>
</div>

<script>
new Vue({
el: '#app',
data: {
nachricht: 'Hallo'
},
computed: {
umgekehrteNachricht: function () {
return this.nachricht.split('').reverse().join('')
}
}
})
</script>

Die umgekehrteNachricht-Eigenschaft wird immer die Umkehrung von nachricht sein und aktualisiert sich automatisch, wenn nachricht geändert wird!

Beobachter

Beobachter sind wie wachsame Wächter für deine Daten. Sie beobachten Änderungen in den Daten und führen Aktionen aus, wenn diese Veränderungen auftreten.

<div id="app">
<p>
Stell eine ja/nee-Frage:
<input v-model="frage">
</p>
<p>{{ antwort }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
frage: '',
antwort: 'Fragen enthalten normalerweise ein Fragezeichen. ;-)'
},
watch: {
frage: function (neueFrage, alteFrage) {
this.antwort = 'Warte, bis du aufhörst zu tippen...'
this.debouncedGetAnswer()
}
},
created: function () {
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.frage.indexOf('?') === -1) {
this.antwort = 'Fragen enthalten normalerweise ein Fragezeichen. ;-)'
return
}
this.antwort = 'Nachdenken...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.antwort = _.capitalize(response.data.antwort)
})
.catch(function (error) {
vm.antwort = 'Fehler! Konnte die API nicht erreichen. ' + error
})
}
}
})
</script>

In diesem Beispiel beobachten wir die frage-Eigenschaft. Wenn sie sich ändert, aktualisieren wir die antwort und rufen eine Methode auf, um eine neue Antwort von einer API abzurufen.

Methoden-Tabelle

Hier ist eine Tabelle, die die Methoden zusammenfasst, die wir behandelt haben:

Methode	Beschreibung	Beispiel
v-bind	Dynamische Bindung von Attributen	<a v-bind:href="url">
v-if	Bedingte Darstellung	<p v-if="gesehen">Now you see me</p>
v-for	Listen-Darstellung	<li v-for="item in items">{{ item }}</li>
v-on	Ereignisverarbeitung	<button v-on:click="doSomething">
v-model	Zweifach-Daten-Binding	<input v-model="message">

Und das war's! Du hast gerade deine ersten Schritte in die wundervolle Welt der Vue.js-Templates gemacht. Denke daran, Übung macht den Meister, also habe keine Angst, mit diesen Konzepten zu experimentieren. Bevor du es weißt, wirst du erstaunliche Vue.js-Anwendungen bauen. Viel Spaß beim Coden!

Credits: Image by storyset