Bearbeiten von „Vue - Basic Concepts“

== Links ==
 [[Vue.js]]
 [[Vue - Components]]
 [[Vue - Snippets]]

== Übersicht ==
* Deklarativer Ansatz
* Data Option / Function
* Methods Option / Object
* Outputting Data mit
** Interpolation {{}}
** Bindings v-bind:property="myVal"
** Methods
** JavaScript Objects
* this 


<syntaxhighlight lang="javascript">
// create App
const app = Vue.createApp();
// mount a html region
// app.mount('cssSelector');
app.mount('#myId'); // Vue controls now this id in the DOM


const app = Vue.createApp({
  // DATA FUNCTION can hold key val pairs
  data() { //or data: function(){...}
    return{ // data always returns an object
      myVar: 'Learn Vue',// can store keys with vals of every type(bool, object, string...)
      myVar2: 'Master Vue<, 
      myHTML: '<h3>HTML Code</h3>', // use v-html to output html code
      myLink: 'https://viewjs.org'
    }; 
  }
  // METHODS OBJECT HOLDS FUNCTIONS
  methods: {
    outputGoal(){
      const randomNumber = Math.random();
      if (randomNumber < 0.5) {return 'Learn Vue';}
      else {return this.myVar2} // 'this' works because vue merges all data and methods in a global vue object
    }
  }
});
</syntaxhighlight>

<syntaxhighlight lang="html5">
<div id="myId">
<h3>Interpolation</h3>
<p>{{ myVar }}</p> <!-- Interpolation outputs "Learn Vue" -->
<h3>Binding</h3>
<p>Use bindings to set attributes. I.e. set the href attribute. {{myLink}} wouldn't work inside of tags.</p>
<p>Learn more <a v-bind:href="myLink">about Vue</a></p>
<p>{{ outputGoal() }}</p><!-- functions or simple js expresseions like 1+1 work to -->
<p v-html="myHTML"></p>
</div>
</syntaxhighlight>

Im Beispiel sind einige der Basiskonzepte zu sehen.

=== data() Objekt ===
Die Funnktion data(){} ist eine Funktion die alle Properties initialisiert. Die Funnktion gibt ein Objekt mit allen Eigenschaften zurück: data(){ return {prop1: 'hallo'} }. Die Properties können Zahlen, Strings, Objekte... sein.

=== methods Objekt ===
Das Objekt methods{} gibt Methoden zurück die man nutzen kann. Es gibt noch computed und watch für ähnliche Aufgaben s.u.

=== Interpolations ===
Interpolations sind vereinfacht gesagt '''Platzhalter'''. Man kann man im HTML Template nutzen um Eigenschaften (oder den Rückgabewert von Funktionen oder auch Ausdrücke) auszugeben.
 {{ myproperty }}
 {{ myFunction }} // Referenz auf eine Funktion
 {{ myFunction() }} // Funktion (wird direkt ausgeführt (vgl. methods, computed, watch)
 {{ 1 + 1 }}
Da hier mehr als nur ein Einsetzen stattfindet greift Platzhalter eigentlich zu kurz. Vielmehr verkabelt (bindet) man Teile des Templates dynamisch an Ereignisse, Eigenschaften und Funktionen. 

=== Deklarativer Ansatz ===
Dies bedeutet man '''deklariert wo etwas passieren''' soll und Vue prüft selbstständig ob sich etwas verändert hat und irgendwo etwas neu gerendert wird. Beim klassischen Ansatz würde man alles was neu gerendert wird selbst programmieren. In der Praxis setzt man die Interpolations und definiert im HTML Code Bindings und Event Handler und überläßt Vue dann die Überwachung was damit passieren soll.

=== v-bind ===
Mit v-bind kann man P'''roperties auch in HTML Attributen nutzen'''. Interpolations funktionieren nur zwischen HTML-Tags.
 <a v-bind:href="myLink">about Vue</a>

==== Shortcut v-bind ====
v-bind: kann durch : ersetzt werden
  <a :href="myLink">about Vue</a>

=== v-html ===
Benötigt man wenn '''reiner HTML Code''' ausgegeben wird. Interpolations escapen HTML aus Sicherheitsgründen.

=== this ===
Mit this kann man auf das '''globale Datenobjekt''' zugreifen. Man kann damit z.B. in methods auf alle Eigenschaften in data zugreifen. Und diese auch setzten.
 this.myVar = 'Hallo Welt'

== Event Handling ==
=== v-on ===
<syntaxhighlight lang="javascript">
const app = Vue.createApp({
  data() {
    return {
      counter: 0,
    };
  },
  methods:{
    plus(n){ this.counter = this.counter + n },
    minus(n){ this.counter = this.counter - n },
    updateName(event){
      this.name = event.target.value
    }
  }
});

app.mount('#events');
</syntaxhighlight>
<syntaxhighlight lang="html5">
<section id="events">
  <h2>Events in Action</h2>
  <p> We can use expression in v-on:click or use a function from our methods object</p>
  <!-- CLICK EVENT -->
  <button v-on:click="plus(5)">Add 5</button>
  <button v-on:click="minus(5)">Substract 5</button>
  <p>Result: {{ counter }}</p>
  <!-- INPUT EVENT -->
  <input type="text" v-on:input="updateName">
  <p>Hello {{ name }}</p>

</section>
</syntaxhighlight>
==== v-on Shortcut ====
v-on: kann durch @ ersetzt werden.
 v-on:click="plus(5)"
 @:click="plus(5)"

=== $event ===
In Eventlistenern kann man automatisch auf das event Argument zugreifen, das der Browser automatisch mitliefert (siehe Beispiel oben). Wenn man allerdings selbst ein Argument übermittelt wird das Event Argument überschrieben. Man kann aber mit dem reservierten Argument $event trotzdem wieder auf das Event Objekt zugreifen:

<syntaxhighlight lang="javascript">
    updateName(event, lastName){
      this.name = event.target.value + ' ' + lastName
    }
</syntaxhighlight>
<syntaxhighlight lang="html5">
      <input type="text" v-on:input="updateName($event,'Schlegel')">
      <p>Hello {{ name }}</p>
</syntaxhighlight>

=== Event Modifiers ===
Es gibt verschiedene Event Modifier z.B. um sich ein event.preventDefault() zu sparen. Event Modifiers werden mit einem '.' an das Event im HTML angehängt
 v-on:submit.prevent

 https://vuejs.org/v2/guide/events.html#Event-Modifiers
==== Click Modifiers ====
 v-on:click.right
 v-on:click.middle
 ...

==== Key Modifiers ====
 //.enter means fire only if ENTER Key is pressed
 v-on:keyup.enter="confirmInput" //possible is all ctrl, shift, page-down...

<syntaxhighlight lang="html5">
<!--also multiple v-on handlers are possible-->
<input type="text" 
  v-on:input="updateName" 
  v-on:keyup.enter="confirmName">
<p>Hello {{ confirmedName }}</p>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
const app = Vue.createApp({
  data() {
    return {
      name: '',
      confirmedName: '',
    };
  },
  methods:{
    updateName(event, lastName){
      this.name = event.target.value
    },
    confirmName(){
      this.confirmedName = this.name 
    }
  }
});
app.mount('#events');
</syntaxhighlight>

== Two way binding ==
Bei Input Feldern möchten wir oft einerseits 
 1. Eine data Property mit mit der User Eingabe setzen
 2. Eine data Property auslesen und im value Attribut setzen. 
Das bedeutet wir müssen das Input Feld auf zwei Wegen verbinden

=== Beispiel Reset Button ===
Das Input Feld bekommt 2 Binds

 1. Value Attribut wird an das "name" Property gebuden.
 2. Input Event wird an die Funktion "setName" gebunden.

Wird von irgendwoher (in unserem Fall vom Reset Knopf) die Eigenschaft "name" verändert, so wird auch der value im Input automatisch verändert.
In Vanilla JS müßten wir alle Stellen in denen name gesetzt ist von Hand zurücksetzen müssen.

<syntaxhighlight lang="html5">
<input type="text" v-bind:value="name" v-on:input="setName($event)">
<p>Your Name: {{ name }}</p>
<button v-on:click="reset()">Reset</button>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
//...
  data() {
    return { name: '' };
  },
  methods: {
    setName(event) { this.name = event.target.value; },
    reset() { this.name = ''; }
  }
//...
</syntaxhighlight>
==== v-model two-way-binding ====
Two Way Binding bedeutet also die Kombination aus '''Eventhandling''' (Ereignisbehandlung = Aufrufen einer Funktion bei einem Event) '''und Databinding''' (Die Bindung des Wertes an eine Eigenschaft). Dieser Fall tritt sehr oft auf, daher gibt es für dieses Muster eine eigene Direktive.

Statt
 <input type="text" v-bind:value="name" v-on:input="setName($event)">
schreiben wir nur
 <input type="text" v-model="name">
'''Die Funktion setName die wir oben haben entfällt komplett.''' Denn die Eigenschaft "name" wird mit two-way-binding sowohl gesetzt als auch abgerufen. Im Two Way Binding ist das Model also mit Getter und Setter enthalten. 

== Computed Properties ==
Wir können Interpolations auch mit Funktionen nutzen:
<pre> {{ myFunction() }} </pre>
Das kann allerdings in '''Performance Problemen''' enden. '''Da Vue nicht weiß welche Properties in der Funktion angepasst werden''' führt es diese Funktion bei jeder Änderung von irgendwelchen Properties (in data) aus, auch wenn das gar nicht notwendig ist. Um das zu umgehen gibt es neben ''data'' und ''methods'' noch ein drittes Konigurationsobjekt nämlich ''computed''.

Im computed Objekt können wir wie in methods '''Funktionen definieren'''. Diese Funktionen werden aber '''benutzt wie Eigenschaften'''. Daher sollte man sie auch wie Properties benennen also z.b. nicht renderFullname sondern fullname. Im HTML Code darf sich auch nicht aufgerufen werden sondern man zeigt nur auf die Funktion also '''NICHT {{ fullname() }} sondern nur {{ fullname }}'''.
Per Konzept ruft Vue diese Funktionen dann selbst auf wenn notwendig.
 
=== method oder computed ? ===
computed
* immer dann wenn etwas gerendert werden soll
* wenn man die Funktion wie eine Eigenschaft nutzt
* rufe niemals eine computed method auf

method
* Wenn eine Methode immer ausgeführt werden soll sobald eine Änderung eintritt. Dann kannst du eine Methode direkt in eine Interpolation schreiben.
* Für bindings. Also Funktionen die bei Events aufgerufen werden.
* Tatsächliche Funktionalität die von anderen Methoden aufgerufen wird.

== Watchers ==
Watchers sind ein 4. Konfigurationsobjekt und haben Ähnlichkeit mit den Computed Properties. Ein Watcher überwacht die Änderung einer Eigenschaft und wird dann ausgeführt.
Eine Watcherfunktion bekommt immer den Namen einer Eigenschaft.

<syntaxhighlight lang="javascript">
data{
  counter: 0;
},
watch{
    counter(value){
      if (value > 50) this.counter = 0;
    }
}
</syntaxhighlight>

Wann immer sich die Eigenschaft counter verändert wird die Funktion counter() aufgerufen.

Der Watcher Funktion kann automatisch der aktuellste und der vorigen Wert der Eigenschaftsvariablen übergeben werden.
 counter(oldValue, newValue){ ... }

Die Stärken von Watchern sind die Überwachung von Zuständen. Du nutzt sie immer dann wenn etwas ausgeführt werden soll wenn ein bestimmter Zustand eintrifft. Computed Properties haben ihre Stärke eher dann wenn einfach nur Werte bei jedem Event verändert werden müssen aber ein v-model nicht ausreicht.

== methods vs computed vs watch ==
''' Einsatzbereich von Methods '''
* '''Wenn in Interpolations''' {{ functionName() }} werden Sie bei '''jeder Änderung, egal welcher Property''' ausgeführt. -> Nur bei Aufgaben die bei jeder Änderung ausgeführt werden sollen
* '''Aufgaben die von Events via v-bind aufgerufen werden. Also bei der '''Ereignisbehandlung'''.'''
* Allgemeine Funktionen ohne bestimmten Bezug zu einem Event o.ä. 

''' Einsatzbereich von Computed Properties '''
* Aufgaben die bei '''Änderungen von einer oder mehrere Eigenschaften ausgeführt werden, aber nicht bei allen.
* '''Aufgaben die von mehreren Eigenschaften abhängen''' (z.B. Vor- ODER Nachname wird geändert). Hier kann man mit CP Code im Vergleich zu Watchern sparen.
* Bessere Performance wenn nicht alle Eigenschaften berücksichtigt werden müssen (im Vergleich zu Methods).
* werden nicht direkt in Interpolations aufgerufen sondern nur referenziert ( {{ myComputed }} aber nicht {{ myComputed() }}


'''Einsatzbereich von Watchern'''
* Aufgaben die '''bei bestimmten Ereignissen''' ausgerführt werden. Sprich: Eigenschaften auf einen bestimmten Zustand hin überwachen.
* Bei einem bestimmten Zustand einen http Request ausführen
* Timer starten, resetten
* Etwas in localStorage speichern
* Werden nicht direkt im Template verwendet (nur die Property)
* Können Properties aber auch computed Properties überwachen

== Dynamic Styling ==

=== Style Attribut ===
In den Attributen style und class erlaubt Vue eine besondere Syntax. Man kann ein Objekt mit einem Style direkt mit v-bind (oder :) einsetzen.
 v-bind:style="{color:green}"
bei Eigenschaften mit Bindestrich kann man camelCase verwenden:
 v-bind:style="'border-color': red"
 v-bind:style="borderColor: red"
Auch Ausdrücke sind wie immer bei Vue erlaubt. Hier ein Beispiel (beachte auch v-bind: wird durch : ersetzt)
 :style="{borderColor: selectedBoxA ? 'red' : '#ccc' }"
In diesem Beispiel gehen wir davon aus dass wir eine Property 'selectedBoxA haben, die auf true oder false steht.

=== Class Attribut ===
Vue kann auch eine Klasse setzten. Das ist in der Regel auch die bessere Vorgehensweise, da man Inline Styles schlecht überschreiben kann. Auch hier sind Ausdrücke möglich. Wir gehen in den Beispielen davon aus, dass wir eine Eigenschaft '''selectedBoxA''' haben die true oder false ist und eine Funktion ''selectBox()'' die für uns diese Eigenschaft auf true setzen kann.
 :class="selectedBoxA ? 'active demo' : 'demo'"
<syntaxhighlight lang="html5">
<div @click="selectBox('A')" :class="selectedBoxA ? 'active demo' : 'demo'"></div>
</syntaxhighlight>
Auch für class gibt es eine spezielle Syntax die das Leben einfacher macht:
<syntaxhighlight lang="html5">
<div @click="selectBox('A')" :class="{demo: true, active: boxSelectedA}"></div>
</syntaxhighlight>
Vue akzeptiert ein Objekt in dem man einfach key value Paare übergibt. Ist der value true wird die Klasse gesetzt. wenn also boxSelectedA true ist wird die Klasse active gesetzt. Demo wird immer gessetzt.

==== class + :class ====
Noch einfacher wird es, wenn man auch das class Attribut und das v-bind class Attribut zusammen einsetzt. Vue merged dann das dynamisch gebundene mit dem statischen class Attribut.
<syntaxhighlight lang="html5">
<div @click="selectBox('A')" class="demo" :class="{active: boxSelectedA}"></div>
</syntaxhighlight>

==== Class Object aus computed property ====
Du kannst auch die Logik komplett auslagern. Dazu gibst du das Object am Besten aus einem computed Property zurück:

<syntaxhighlight lang="html5">
<div @click="selectBox('A')" class="demo" :class="boxAClasses"></div>
</syntaxhighlight>
<syntaxhighlight lang="javascript">
computed:{ 
  boxAClasses(){ 
    return{ active: this.boxSelectedA } 
  }
}
</syntaxhighlight>
Hier kann man auch komplexere Logik abbilden.

==== Array Schreibweise / mehrere Class Objekte ====
Du kannst auch mehrere Objekte nutzen. Dazu kommen Sie in ein Array:
 :class="['demo', {active: boxSelectedA}]"

== Conditions & Loops ==
=== v-if / v-else / v-else-if ===
Mit Conditions kann man Teile des DOM anzeigen oder entfernen. Wichtig: die Teile werden tatsächlich entfernt und hinzugefügt und nicht einfach versteckt.

In data() haben wir ein array definiert: 
 goals: []
<syntaxhighlight lang="html">
<p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
<ul v-else>
  <li>Goal</li>
</ul>
</syntaxhighlight>
Wenn goals Inhalt hat wird die Liste angezeigt. Das ist hier natürlich nur mäßig sinnvoll, da wir die Liste hier nicht dynamisch füllen, erklärt aber das Prinzip.

Außerdem gibt es noch v-else-if das man genauso wie das v-else nach v-if einbauen kann. Funktioniert wie in anderen Sprachen.

=== v-show ===
Mit v-show werden DOM Elemente gezeigt oder versteckt. Die Anwendung ist analog zu v-else. v-show kann nur alleine verwendet werden. Versteckte Elemente werden nur per Inline-Style versteckt und bleiben im DOM. I.d.R. verwendet man v-if. v-show kann man nutzen wenn ein Element sehr oft ein und ausgeblendet wird. Dabei kann v-show etwas perfomanter sein. Allerdings auf Kosten von unnötigem Ballast im DOM.

 <p v-show="goals.length === 0">No goals have been added yet - please start adding some!</p>

=== v-for ===
Dies ist die Entsprechung des JavaScript for loops. 
JavaScript:
 for(const goals of goal)
Vue:
<pre><li v-for="goal in goals">{{goal}}</li></pre>
Wie in JavaScript kann man auch of statt in nehmen. Ist aber wenig üblich. Mit in kann man direkt auf einzelne Element zugreifen kann. Wenn goals ein Array mit Strings ist:
 goals:['one', 'two', 'three']
erzeugt vue hier
 <li>one</li>
 <li>two</li>
 <li>three</li>
==== for loop - index ====
Vue kann auch den Index des Arrays als zweiten Parameter übergeben.:
<pre><li v-for="(goal, i) in goals">#{{i}} {{goal}}</li></pre>

==== for loop mit Objekten ====
For funktioniert analog auch mit Objekten. Im Beispiel packen wir das Objekt einfach mit in den Loop. In der Praxis würde man dies eher im JavaScript Code erzeugen. Die Variablen item und key sind hier ebenfalls frei wählbar. Das erste Argument bekommt den Wert, das Zweite den Schlüssel.
<pre><li v-for="(item, key) in {color:'red', taste: 'sweet', fruit: 'cherry'}"> {{key}}: {{item}} </li></pre>
Als drittes Argument könnte man auch noch den index bekommen. 
 (value, key, index)

==== for loop mit Zahlenbereich ====
Auch ranges sind möglich:
<pre><li v-for="n in 10">{{ n }}</li></pre>

=== Hinweise ===
Nutze nicht v-if und v-for auf dem selben Element. Stattdessen nutze einen v-if wrapper (also das if Element um das v-for legen)

=== key Attribut ===
Achtung: Wenn Vue ein Listenelement entfernt werden die folgenden dynamischen Inhalte einfach ein Element nach vorne verschoben. Evtl. statische Inhalte verbleiben. Das kann seltsames Verhalten erzeugen sobald mehr als der dynamische Tag im geloopten Element ist. Vue macht dies aus Performance Gründen so. Damit man dies umgehen kann gibt es das key Attribut. Das ist ein spezielles Attribut, in das mein einen eindeutigen Identifier für das aktuelle Element schreibt (z.B. aus der Datenbank) Mit hilfe dieses keys kann Vue die Liste effizient managen.

'''Wenn du for verwendest nutze immer das key Attribut!'''

<pre><li :key="goal" v-for="(goal, i) in goals" @click="removeGoal(i)">#{{i}} {{goal}}</li></pre>

== Refs - Änderungen auf Abruf verarbeiten ==
Die Reaktivität von Vue bedeutet, dass bei jeder Änderung eines Wertes Code ausgeführt wird. Füllt ein User z.B. ein Input Feld aus wird mit jedem Tastendruck Code ausgeführt. In manche Fällen  möchte man den geänderten Wert erst verarbeiten wenn der User fertig ist.

Dafür gibt es das ref Attribut. Dies ist ein Vue-spezifisches Attribut. Wenn man es setzt wird bei diesem Element nicht sofort die Reflektionskette in Gang gesetzt. Stattdessen landet der Wert im '''$refs Objekt'''. Dies ist ein spezieller Speicher denn man '''jederzeit manuell auslesen kann'''. Der Zugriff erfolgt so:
 this.$refs.[refname].value
Beispiel:
<syntaxhighlight lang="html5">
<section id="app">
  <input type="text" @input="saveText"> <!-- ohne ref -->
  <input type="text" ref="userText">
  <button @click="setText">Set Text</button>
  <p>{{ message }}</p>
</section>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
saveInput(event) {
  this.currentUserInput = event.target.value; // ohne ref
},
setText() {
  this.message = this.currentUserInput; // ohne ref
  this.message = this.$refs.userText.value; // mit ref
  // console.dir(this.$refs.userText);
},
</syntaxhighlight>

== Templates ==
'''Templates bezeichnen den Bereich des DOM den eine App kontrolliert.''' In der Praxis holt man sich das Template oft über den Selector in .mount().

Man kann aber auch in der Konfiguration mit dem template Objekt, der Inhalt eines Template direkt im JS erzeugt werden. Trotzdem muss es noch gemounted werden, damit Vue weiß wo auf der Seite die App gerendert werden soll.

== Mehrere Apps ==
Man kann auch mehrere Apps auf einer Seite haben, die dann unterschiedliche Templates kontrollieren. 
* Apps sind voneinander getrennt. Eine App hat keine Zugriff auf die Daten der anderen App.
* Ein Template soll nur von einer App kontrolliert werden.

== Hooks / Vue Lifecycle ==
Im Lifecycle einer App treten einige definierte Ereignisse auf, in die man auch per Hook eingreifen kann. Das sind die Hooks einer Vue App:
<syntaxhighlight lang="javascript">
  methods: {
    saveInput(event) {
      this.currentUserInput = event.target.value;
    },
    setText() {
      // this.message = this.currentUserInput;
      this.message = this.$refs.userText.value;
      // console.dir(this.$refs.userText);
    },
  },
  beforeCreate() {
    console.log('beforeCreate()');
  },
  created() {
    console.log('created()');
  },
  beforeMount() {
    console.log('beforeMount()');
  },
  mounted() {
    console.log('mounted()');
  },
  beforeUpdate() {
    console.log('beforeUpdate()');
  },
  updated() {
    console.log('updated()');
  },
  beforeUnmount() {
    console.log('beforeUnmount()');
  },
  unmounted() {
    console.log('unmounted()');
  },
});
</syntaxhighlight>