Vue3 Deklaratives Rendering

Deklaratives Rendering bedeutet, View-Updates durch Daten anzutreiben, anstatt das DOM direkt zu manipulieren.

Deklaratives Rendering ermöglicht es Entwicklern, sich stärker auf die Geschäftslogik zu konzentrieren, ohne sich darum kümmern zu müssen, wie die Ansicht und das DOM aktualisiert werden.

Das deklarative Rendering von Vue3 ist ein vorlagenbasierter Rendering-Ansatz, mit dem Entwickler die Seitenstruktur und Datenbindungsbeziehungen durch eine prägnante Vorlagensyntax beschreiben können, ohne das DOM direkt manipulieren zu müssen.

Das deklarative Rendering von Vue3 vereinfacht den UI-Aktualisierungsprozess durch die Verwendung von Vorlagen, Direktiven (wie v-if, v-for, v-bind usw.) und reaktiven Daten.

Beim deklarativen Rendering von Vue müssen Sie nur deklarieren, wie die UI dargestellt werden soll; Vue aktualisiert die Ansicht automatisch basierend auf Datenänderungen. Wenn Sie die Daten ändern, reagiert die Ansicht automatisch.

Vue3 verwendet eine Vorlagensyntax (ähnlich wie HTML), um die UI zu beschreiben, und Ausdrücke in der Vorlage (wie {{ message }}) sind an das Datenmodell der Komponente gebunden.

1. Datenbindung

Datenbindung ist der Kern des deklarativen Renderings.

Durch die Bindung von Daten kann Vue den Inhalt von DOM-Elementen automatisch aktualisieren und traditionelle manuelle DOM-Manipulation vermeiden.

Interpolationsausdruck

Der Interpolationsausdruck verwendet doppelte geschweifte Klammern{{ }}, um die Daten der Komponente in die HTML-Vorlage einzufügen.

Beispiel

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
};
</script>

Im obigen Beispiel werden die doppelten geschweiften Klammern{{ message }}alsHello, Vue 3!gerendert, und wenn sich der Wert von message ändert, wird die Ansicht automatisch aktualisiert.

Der Inhalt innerhalb doppelter geschweifter Klammern ist nicht auf Bezeichner oder Pfade beschränkt—wir können jeden gültigen JavaScript-Ausdruck verwenden.

<h1>{{ message.split('').reverse().join('') }}</h1>

Attribut-Bindung

Durch diev-bind-Direktive können Sie HTML-Attribute an die Daten der Komponente binden, wodurch die Attribute von DOM-Elementen (wie href, class, src) dynamisch basierend auf dem Zustand der Komponente aktualisiert werden können.

Beispiel

<template>
  <div>
    <a v-bind:href="url">Klick mich</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.example.com'
    };
  }
};
</script>

Im obigen Beispiel bindet v-bind:href die url-Daten an das href-Attribut des <a>-Tags. Wenn sich url ändert, wird href automatisch aktualisiert.

Bedingtes Rendern

Vue implementiert bedingtes Rendering durch die Direktiven v-if, v-else-if und v-else und entscheidet anhand einer bestimmten Datenbedingung, ob ein DOM-Element gerendert wird.

Beispiel

<template>
  <div>
    <p v-if="isVisible">Dieser Text ist sichtbar</p>
    <button @click="toggleVisibility">Sichtbarkeit umschalten</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

Im obigen Beispiel wird das <p>-Tag gerendert, wenn isVisible true ist. Wenn auf die Schaltfläche geklickt wird, wechselt isVisible, und ob das <p>-Tag angezeigt wird, ändert sich ebenfalls automatisch.

Listen-Rendering

Verwenden Sie die v-for-Direktive, um eine Liste zu rendern.

Vue rendert das entsprechende DOM-Element für jedes Element im Array und aktualisiert die Ansicht automatisch, wenn sich die Array-Daten ändern.

Beispiel

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Vue 3' },
        { id: 2, name: 'JavaScript' },
        { id: 3, name: 'HTML' }
      ]
    };
  }
};
</script>

Im obigen Beispiel rendert v-for eine Liste basierend auf dem items-Array. Jedes Listenelement hat einen Key, um Vue dabei zu helfen, jedes Element zu verfolgen, wodurch die Render-Effizienz verbessert wird.

Zwei-Wege-Datenbindung

Vue stellt die v-model-Direktive bereit, um eine bidirektionale Bindung zwischen Formularelementen (wie <input>) und Komponentendaten zu implementieren. Auf diese Weise bleibt der Wert des Formularelements mit dem Datenmodell synchron. Wenn der Benutzer Eingaben macht, werden die Daten automatisch aktualisiert, und wenn sich die Daten ändern, wird die Ansicht automatisch aktualisiert.

Beispiel

<template>
  <div>
    <input v-model="message" placeholder=Text eingeben />
    <p>Sie haben eingegeben: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

Im obigen Beispiel hält v-model den Wert des input-Elements mit den message-Daten synchron. Wenn der Benutzer Text in das Eingabefeld eingibt, wird message automatisch aktualisiert, und der Inhalt im <p>-Tag ändert sich ebenfalls automatisch.

Ereignisbehandlung

Vue stellt die v-on-Direktive bereit, um DOM-Ereignisse abzuhören und Methoden auszuführen, wenn Ereignisse ausgelöst werden. Dieser Ansatz ermöglicht es Ihnen, Ereignisse wie Benutzereingaben und Klicks deklarativ zu behandeln.

Beispiel

<template>
  <div>
    <button v-on:click="increment">Klick mich</button>
    <p>Anzahl der Klicks: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
};
</script>

Im obigen Beispiel hört v-on:click auf das Klick-Ereignis der Schaltfläche und ruft bei jedem Klick die Methode increment auf, um den Wert von count zu erhöhen. count wird in der Ansicht automatisch aktualisiert.

Berechnete Eigenschaften

Computed Properties sind eine von Vue bereitgestellte Möglichkeit, Werte deklarativ zu berechnen.

Computed Properties basieren auf reaktiven Daten und werden nur neu berechnet, wenn sich die abhängigen Daten ändern.

Beispiel

<template>
  <div>
    <p>Ursprünglicher Betrag: {{ amount }}</p>
    <p>Betrag nach Steuern: {{ computedAmount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 100
    };
  },
  computed: {
    computedAmount() {
return this.amount * 1.1; // Angenommen, der Steuersatz beträgt 10%
    }
  }
};
</script>

computedAmount ist eine Computed Property, die den Betrag nach Steuern basierend auf amount berechnet. Wenn sich amount ändert, wird computedAmount automatisch aktualisiert, ohne dass eine Ansichtsaktualisierung manuell ausgelöst werden muss.

Andere Erweiterungen