Vue.js

Die App-Instanz

Jede Vue.js Anwendung benötigt (mindestens) eine zentrale App-Instanz. Je HTML-Datei sind beliebig viele weitere möglich. Eine Instanz wird mit der Funktion createApp() und einer Wurzelkomponente als erstem Parameter erzeugt. Mit mount() muss diese Komponente dann an einen HTML-Knoten gebunden werden (hier mit dem Element <div id="knoten"></div> unter Verwendung des CSS-Selektors „#knoten“).^[7]

import { createApp } from 'vue'
import Komponente from './Komponente.vue'

const app = createApp(Komponente)

app.mount('#knoten')

Vue-Komponenten

Vue.js Anwendungen werden mittels Komponenten strukturiert, welche sich baumartig verschachteln lassen. Komponenten werden entweder mit der Composition oder der Options API meist als Single-File Components (SCF) bestehend aus JavaScript, HTML-Template und CSS-Block in einer auf .vue endenden Datei definiert. Neben der nachstehenden lokalen Registrierung, können Komponenten alternativ auch global registriert werden.^[8][9][10]

<script setup>
import { ref } from 'vue'

const zustand = ref(0)

function hochzaehlen() {
  zustand.value++
}
</script>

<template>
    <button @click="hochzaehlen">Wert: {{ zustand }}</button>
</template>

<style scoped>
    button { font-size: 2rem; }
</style>

<script>
export default {
  data() {
    return {
      zustand: 0
    }
  }
}
</script>

<template>
  <button @click="zustand++">Wert: {{ zustand }}</button>
</template>

Double Curly Syntax

Mithilfe von doppelt geschweiften Klammern (double-curly syntax) können Datenfelder einer Komponente direkt in den HTML-DOM eingefügt werden. Ändern sich die zugrunde liegenden Werte, wird die Ausgabe automatisch aktualisiert.^[13] Das Databinding ist in beide Richtungen möglich (“Two way databinding”), wodurch die Veränderung der Daten ebenfalls ermöglicht wird.^[14] Die Direktive model sorgt für das Databinding mit Input-Elementen.

<div id="demo">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

Direktiven

Mit HTML-Attributen ist es möglich, Aktionen auszuführen, wie zum Beispiel mit einer Schleife durch ein Array zu iterieren, HTML-Knoten nur optional in den DOM einzubinden (v-if), HTML-Knoten auszublenden (v-show), Events abzufangen (v-on) oder Attribute an Variablen zu binden (v-bind). Die Direktiven von Vue.js sind an dem Präfix v- erkennbar.^[15] Eigene Direktiven können definiert werden in Form von JavaScript-Funktionen. Bis Version 2 war es auch möglich, Filter anzuwenden, um die Ausgabe von JavaScript-Elementen zu verändern.^[16]

<ul>
  <li v-for="item in items">
    {{ item }} <!-- Ausgabe des Wertes -->
  </li>
</ul>

Composables

Composables sind wiederverwendbare Funktionsmodule der Composition API. Sie dienen der Kapselung und Wiederverwendung von zustandsbehafteter, reaktiver Logik innerhalb von Vue-Komponenten und unterscheiden sich damit von einfachen Hilfsfunktionen, die keinen Reaktivitätskontext besitzen.^[17][18]

import { ref } from 'vue'

export function useZaehler() {
  const zaehler = ref(0) // reaktive Variable
  
  const erhoehen = () => { // Funktion zum Erhöhen des Zählers
    zaehler.value++
  }
  
  return { zaehler, erhoehen } // Rückgabe von Zustand und Funktion
}

Das Beispiel-Composable mit Zähler und Funktion zum Inkrementieren des Wertes kann wie folgt innerhalb eines Script-Blocks verwender werden:

<script setup>
import { useZaehler } from './useZaehler.js'

const { zaehler, erhoehen } = useZaehler()
console.log(zaehler.value) // Ausgabe -> 0
erhoehen()
console.log(zaehler.value) // Ausgabe -> 1
</script>

Lebenszyklus der Komponenten

Alle Instanzen und Komponenten durchlaufen einen Lebenszyklus,^[19] dieser besteht aus mehreren Etappen, welche dazu genutzt werden können, eigene Funktionen aufzurufen. Vor allem die Etappe mounted wird sehr häufig verwendet^[20], da diese aufgerufen wird, unmittelbar nachdem die Komponente im DOM eingebunden wurde. Durch die Verwendung von nextTick() kann Code definiert werden, welcher erst aufgerufen wird, wenn die Komponente vollständig aktualisiert wurde.^[21]

<script setup>
import { nextTick, onMounted, onUnmounted } from 'vue'

onMounted(() => {
  // Wird aufgerufen, wenn die Komponente sichtbar wird, wie z. B. durch v-if oder vue-router
  console.log('Die Komponente wurde vollständig im DOM eingebunden.')
  
  nextTick(() => {
    console.log('Die Komponente wurde gerendert.')
  })
})

onUnmounted(() => {
    // Wird aufgerufen, wenn die Komponente aus dem DOM entfernt wird
    // z.B. removeListener(XY)
})
</script>

Modularität

Vue.js kann durch Erweiterungen ergänzt werden, diese können Mixins,^[22] Direktiven, Komponenten und Objekte enthalten. Als offizielle Erweiterungen werden vuex, ein an Redux angelehnter Zustandsmanager, und vue-router, für die Navigation zwischen verschiedenen Komponenten einer Single-Page-Webanwendung, angeboten.^[23][24][25] Erweiterungen werden unter Verwendung von use() zu einer App-Instanz hinzugefügt.^[26]

app.use(meinPlugin, { /* weitere Optionen */ })