EF Informatik 2023
🔸

Vue ist ein soganntes Javascript-Framework: Dieses wurde selbst in Javascript programmiert und läuft deshalb auf einer HTML-Seite im Browser. Mit Vue kann man interaktive WebApps programmieren.

Installation

Javascript laden

Wir können den von Vue verwendeten Javascript-Code direkt im HTML-Dokument verlinken. Der Browser lädt ihn so selbst vom Netz herunter. Dazu bauen wir im Head unserer HTML-Datei folgendes script-Element ein:

<script src="https://unpkg.com/vue@3"></script>
1

Vue-App initialisieren

Anschliessend muss die App initialisiert werden. Dazu ruft man Vue.createApp() (mit entsprechenden Argumenten) auf und verbindet die App mit einem HTML-Element über die mount-Methode:

Vue.createApp().mount('#app')
1

Variablen

Vue definiert in der data()-Funktion reaktive Variablen und Objekte. Diese können im HTML-Teil mit Hilfe einer Template-Sprache dargestellt oder auch an Eingabe-Elemente gebunden werden.

<div id="app">
	<input type="text" v-model="name" />
	Hello {{ name }}
</div>
1
2
3
4
Vue.createApp({
	data() {
		return {
			name: 'Vue',
		}
	}	
}).mount('#app')
1
2
3
4
5
6
7

Hello World

Diese Hello-World-Vue-App fasst das oben beschriebene zusammen:

<!DOCTYPE html>
<html lang="de">
	<head>
		<title>Hello Vue</title>
		<script src="https://unpkg.com/vue@3"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="name" />
			Hello {{ name }}
		</div>
		<script>
  		Vue.createApp({
			data() {
	  		return {
				name: 'Vue',
	  		}
			}	
  		}).mount('#app')
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Aufgabe

Teste das obenstehende Beispiel aus. Versuche weitere Variablen einzubauen.

Templates

Vue-Templates beinhalten HTML-Code mit speziellen Platzhaltern und Anweisungen für Vue. Es können so Werte angezeigt werden, Elemente bedingt angezeigt werden und auf Events reagiert werden:

Variablen ausgeben

Werte von Variablen können in doppelt geschweifte Klammern ausgegeben werden.

<p>Suche nach {{ search }}</p>
1

In der Klammer drin sind auch einfache Javascript-Ausdrücke möglich, z.B. mit dem «bedingten Operator» – sozusagen ein abgekürztes if-else – um etwas anzuzeigen sollte die Variable search leer sein:

<p>Suche nach {{ search ? search : "–" }}</p>
1

Variablen ändern

Man kann Vue-Variablen mittels v-model an HTML-Input-Elemente knüpfen:

<input type="text" v-model="search" />
1

Das Text-Feld zeigt den Wert von search an – aber man kann ihn damit auch ändern.

Listen

Listen von Elementen brauchen eine Wiederholung zur Darstellung. In Vue verwendet man dafür die v-for-Direktive. Das für die Direktive verwendete HTML-Element wird für jeden Eintrag in der Liste dargestellt. Im Element drin kann man auf das Element der Liste zugreifen:

<div v-for="movie in movies" v-bind:key="movie.id">
	<h1>{{ movie.title }}</h1>
	<p>{{ movie.year }}</p>
</div>
1
2
3
4
Zeile 1
das div-Element wir für jeden movie aus der Liste movies wiederholt
mit :key="movie.id setzen wir einen eindeutigen Schlüssel für die Elemente
Zeile 2 & 3
movie ist ein Objekt aus der Liste movies
mit der Punktnotation können wir auf die einzelnen Eigenschaften zugreifen
Zeile 4
Das div-Element – und somit auch der Zugriff auf movie – wird beendet

if-elseif-else

Ein HTML-Element kann mit der v-if-Direktive bedingt gerendert werden. Der Ausdruck wird ausgewertet und das HTML-Element nur dargestellt, wenn die Auswertung true ergibt. Das direkt nachkommende HTML-Element kann mit einer v-else-Direktive versehen werden.

<div v-for="movie in movies" v-bind:key="movie.id">
	<h1>{{ movie.title }}</h1>
	<p v-if="movie.year > 2021">Neu!!</p>
	<p v-else>{{ movie.year }}</p>
</div>
1
2
3
4
5

Seit Vue 3.2 sind zwischen v-if und v-else ein oder mehrere Elemente mit v-elseif möglich.

Ereignisse

Ereignisse verwenden wir meistens wenn die Maus etwas anklickt. Dazu können wir die v-on:click-Direktive verwenden:

<div v-for="movie in movies" v-bind:key="movie.id" v-on:click="showDetails(movie.id)">
	<h1>{{ movie.title }}</h1>
	<p>{{ movie.year }}</p>
</div>
1
2
3
4
Zeile 1
bei jedem Film binden wir das Klick-Event auf die Methode showDetails und übergeben dieser die ID des Film. Diese sollte dann Details zum Film anzeigen.

Methoden

Die Vue-App kann Methoden definieren die wir dann entweder als Ereignis oder automatisch aufrufen können:

Vue.createApp({
	data() {
		return {
			name: 'Vue',
			movies: []
		}
	},
	methods: {
		async getMovies() {
			const response = await fetch("https://informatik.mygymer.ch/fts/rest/movies/");
			const json = await response.json();
			this.movies = json.movies;
		},
		showDetails(id) {
			// fetch movie-Details and show in App
		}
	}
}).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Hooks

Mit den sogenannten Hooks kann man sozusagen im Vue-Programm-Ablauf «ein-haken». So wird z.B. der created-Hook aufgerufen, sobald die Vue-App erzeugt wurde. Er lässt sich praktisch verwenden um erste Daten zu laden:

Vue.createApp({
	data() {
		return {
			name: 'Vue',
			movies: []
		}
	},
	methods: {
		async getMovies() {
			const response = await fetch("https://informatik.mygymer.ch/fts/rest/movies/");
			const json = await response.json();
			this.movies = json.movies;
		},
		showDetails(id) {
			// fetch movie-Details and show in App
		}
	},
	created() {
		this.getMovies()
	}	
}).mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21