VueJS - Rendering

Hallo da, zukünftiger Vue.js-Superstar! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der Vue.js-Rendering zu sein. Als jemand, der seit Jahren Programmieren unterrichtet, kann ich Ihnen versichern, dass das Beherrschen von Rendering wie das Lernen zu malen ist – es ist, wie wir unsere digitalen Leinwände zum Leben erwecken! Also, rollen wir die Ärmel hoch und tauchen ein!

Bedingtes Rendering

Stellen Sie sich vor, Sie sind ein Zauberer und Sie möchten, dass Dinge mit einer Handbewegung auf Ihrer Webseite erscheinen oder verschwinden. Genau das ermöglicht Ihnen das bedingte Rendering in Vue.js! Es geht darum, Elemente basierend auf bestimmten Bedingungen anzuzeigen oder zu verstecken.

v-if Direktive

Die v-if Direktive ist unser erster Trick im Ärmel. Es ist wie ein Türsteher in einem Club, der entscheidet, wer hereinkommt und wer nicht.

<div id="app">
<h1 v-if="isVisible">Now you see me!</h1>
</div>

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

In diesem Beispiel wird das <h1> Element nur angezeigt, wenn isVisible true ist. Wenn es false ist, puf! Das Element verschwindet完全 aus dem DOM. Es ist nicht nur versteckt – es ist weg, als wäre es nie existiert!

v-else und v-else-if Direktiven

Nun fügen wir mit v-else und v-else-if ein bisschen mehr Magie zu unserem Show hinzu:

<div id="app">
<div v-if="temperature < 0">It's freezing!</div>
<div v-else-if="temperature < 20">It's cool.</div>
<div v-else">It's warm!</div>
</div>

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

Hier erstellen wir eine kleine Wettervorhersage. Abhängig des temperature Wertes erscheinen verschiedene Nachrichten. Es ist, als hätten wir mehrere Falltüren auf einer Bühne – nur eine kann gleichzeitig offen sein!

v-show Direktive

Manchmal möchten wir ein bisschen heimlicher sein. Hier kommt v-show ins Spiel:

<div id="app">
<h1 v-show="isVisible">I'm always here, just sometimes invisible!</h1>
</div>

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

Im Gegensatz zu v-if entfernt v-show das Element nicht aus dem DOM. Es blendet es nur mit CSS aus. Denken Sie daran als ob Sie ein Unsichtbarkeitsmantel über Ihr Element werfen, anstatt es vollständig verschwinden zu lassen.

Listen Rendering

Nun, da wir das Erscheinen und Verschwinden von Dingen beherrschen, lernen wir, wie man aus einem einzigen Template mehrere Elemente erstellt. Hier kommt die Listenrenderung ins Spiel!

v-for Direktive

Die v-for Direktive ist wie ein magischer Kopierer. Sie nimmt ein Template und dupliziert es für jedes Element in einem Array oder Objekt.

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['Apple', 'Banana', 'Cherry', 'Date']
}
})
</script>

In diesem Beispiel erstellen wir eine Einkaufsliste von Früchten. Die v-for Direktive geht durch jede Frucht in unserem fruits Array und erstellt ein neues <li> Element für sie. Es ist, als hätte man ein Team von kleinen Elfen, die jeweils den Namen einer Frucht auf ein neues Stück Papier schreiben!

v-for mit einem Objekt

v-for funktioniert nicht nur mit Arrays – es funktioniert auch mit Objekten!

<div id="app">
<ul>
<li v-for="(value, key) in person">{{ key }}: {{ value }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
person: {
name: 'Alice',
age: 28,
job: 'Developer'
}
}
})
</script>

Hier显示一个人的信息。 Die v-for Direktive geht durch jede Eigenschaft des person Objekts und erstellt ein neues <li> für jedes Schlüssel-Wert-Paar.

v-for mit einem Bereich

Möchten Sie eine bestimmte Anzahl von Elementen erstellen? v-for kann das auch!

<div id="app">
<span v-for="n in 5">{{ n }} </span>
</div>

Dies wird die Zahlen 1 bis 5 anzeigen. Es ist, als ob Sie Vue bitten, für Sie zu zählen!

Key Attribut

Bei der Verwendung von v-for ist es wichtig, jedem gerenderten Element einen eindeutigen key zu geben. Dies hilft Vue dabei, zu verfolgen, welche Elemente geändert, hinzugefügt oder entfernt wurden.

<div id="app">
<ul>
<li v-for="fruit in fruits" :key="fruit.id">
{{ fruit.name }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
}
})
</script>

Denken Sie daran, der key als Namensschild für jedes Element. Es hilft Vue, wer ist wer zu identifizieren, wenn die Liste sich ändert.

Methoden Tabelle

Hier ist eine praktische Tabelle, die die Methoden zusammenfasst, die wir gelernt haben:

Direktive	Zweck	Beispiel
v-if	Bedingtes Rendering eines Elements	<div v-if="isVisible">Hello</div>
v-else	Alternative, wenn v-if falsch ist	<div v-else>Goodbye</div>
v-else-if	Zusätzliche Bedingungen	<div v-else-if="isSpecial">Special</div>
v-show	Umschalten der Sichtbarkeit eines Elements	<div v-show="isVisible">Always in DOM</div>
v-for	Rendering einer Liste von Elementen	<li v-for="item in items">{{ item }}</li>

Und das war's, meine neugierigen Schüler! Wir haben die Grundlagen des Renderings in Vue.js behandelt. Denken Sie daran, Übung macht den Meister,also experimentieren Sie nicht mit diesen Konzepten. Bald werden Sie Vue.js-Komponenten wie ein Profi rendern, dynamische und interaktive Webseiten erstellen, die Ihre Benutzer begeistern werden. Weiter codieren, weiter lernen und vor allem weiter Spaß haben!

Credits: Image by storyset