Kategorie

Mit der Vue Cli v3.x lässt sich eine vorhandene Vue Component sehr schnell eine WebComponent erstellen.

Functional Components sind in Vue.js lediglich Components, welche props nutzen. Hierbei wird eine Component leichtgewichtiger und perfomanter.

Ein Light und Dark Theme kann sehr einfach mit CSS Custom Properties (Variables), welche von modernen Browsern unterstützt werden, umgesetzt werden.

Die Directive v-slot erlaubt nicht nur das Platzieren von Content, sondern auch das Bereitstellen eines individuellen Templates für Iterations-Elemente.

Ein Mixin ist ein wiederverwendbarer Schnipsel für Components und kann alle Optionen enthalten, die einer Component zugewiesen werden können.
Beim Extend eines Mixin werden alle Optionen zusammengeführt (merged).

Custom Form Control mittels ngModel als ngModelCtrl für AngularJs erstellen.
Durch ngModelCtrl lassen sich $viewValue und $modelValue individuell zuweisen.

Async und await kann in AngularJs nur in Verbindung mit $scope verwendet werden, damit Änderungen im View aktualisiert werden.
Durch die Zuweisung von $q dem window.Promise Object wird intern $q verwendet.

Im folgenden wird erläutert wie in AngularJs eine custom Child Reference hergestellt wird.
Hier wird wie in React oder Preact ebenfalls mit einem Callback gearbeitet um ein ViewChild wie Angular2+ zu realisieren.

Eine Structual Directive erlaubt den Zugriff auf DOM Strukturen mittels Hinzufügen, Entfernen oder Manipulieren von Elementen.
Die hier vorgestellte Structual Directive "asRepeat" erlaubt das einfache Iterieren über ein bestimmtes Intervall und erstellt ähnlich wie "ngFor" DOM Elemente.
Man kann sie sich als vereinfachte Form einer for Schleife vorstellen.

Oft sind normale HTML Inputs für komplexere oder umfangreichere Formulare nicht ausreichend.
Mittels ControlValueAccessor und NG_VALUE_ACCESSOR lassen sich Custom Form Controls realisieren und bei Wertänderungen diese übermitteln.
Zur Demonstration wird ein simpler Zahlen Spinner realisiert, der das normale HTML5 Spinner Verhalten erweitert und individuell gestalten lässt.