Seite 4: Filter

Inhaltsverzeichnis

Die Bezeichnung ist irreführend. Es geht nicht darum, Daten zu filtern, sondern sie für die Ausgabe zu formatieren. Vue.js enthält zwar keine mitgelieferten Filter, aber das Hinzufügen eigener Filter ist denkbar einfach.

Man kann zum Beispiel einen globalen Filter registrieren, der über die Intl-API des Browsers eine Zahl im landestypischen Format ausgibt:

Vue.filter('number', n =>  {
  return new Intl.NumberFormat().format(n)
});

Den Filter kann man wie folgt anwenden:

<div>Ergebnis: {{someNumberValue | number}}</div>

Dies gibt dann für den deutschsprachigen Raum Zahlen mit Tausender-Trennzeichen und zwei Nachkommastellen aus. Die Ausgabe ist mit der Übergabe von Argumenten dynamisch steuerbar.

Renderfunktionen und JSX

Der Template-Compilier kompiliert die HTML-Templates von Vue.js automatisch zu Renderfunktionen. Unter der Haube arbeitet Vue.js daher vergleichbar zu React. Renderfunktionen gehören integral zu Vue.js und man kann sie auch alternativ zu HTML-Templates verwenden. Es ist sogar möglich, dafür JSX einzusetzen.

Das einfachste Beispiel einer Renderfunktion war zu Beginn des Artikels bei der Initialisierung der Anwendung zu sehen. Dort bestand die Renderfunktion lediglich aus der Ausgabe der App-Komponenten ohne die Definition weiterer Logik. Anstatt fertige Komponenten auszugeben, kann eine Renderfunktion auch beliebige HTML-Strukturen erzeugen.

Das folgende Beispiel gibt eine HTML-Liste aus:

export default {
  name: "HelloList",
  data() {
    return {
     languages: ["JavaScript", "Rust", "Java", "Python", "C#"]
    }
  },
  render(h) {
    return h("ul", this.languages.map(language => h("li", language)))
  }
}

Die Renderfunktion empfängt per Argument eine Funktion, die üblicherweise mit h abgekürzt wird. Etwas sprechender wäre der Name createElement. Die Funktion kann eigene DOM-Elemente erzeugen. Sie erwartet als erstes Argument den Namen des HTML-Elements oder eine Vue-Komponente, optional weitere Daten und ein Array der Nachfahren des Elements.

Wie man am Beispiel sehen kann, benötigt man für Renderfunktionen keine Konstrukte wie v-if oder v-for, sondern kann es mit Standard-JavaScript-Mitteln ausdrücken.

Die gleiche Renderfunktion mit JSX sieht wie folgt aus:

render(h) {
  return (
    <ul>
      {this.languages.map((item) => {
        return <li>{item}</li>
      })}
    </ul>
  )
}

Renderfunktionen sind ein mächtiges Werkzeug für komplexe Anforderungen. Die grundsätzliche Empfehlung lautet, sie nur einzusetzen, wenn HTML-Templates an ihre Grenzen kommen.