Vue.js - Versionsgeschichte

37.49.72.8: /* Links */

2021-01-07T16:13:51Z

Links

37.49.72.8 am 28. Dezember 2020 um 10:56 Uhr

2020-12-28T10:56:41Z

37.49.72.8 am 28. Dezember 2020 um 10:50 Uhr

2020-12-28T10:50:06Z

84.136.98.253 am 18. Dezember 2020 um 07:22 Uhr

2020-12-18T07:22:28Z

84.136.98.253 am 18. Dezember 2020 um 07:20 Uhr

2020-12-18T07:20:14Z

37.49.72.8 am 16. Dezember 2020 um 20:20 Uhr

2020-12-16T20:20:00Z

Steff: /* Styles und Class Binding */

2019-01-08T13:29:33Z

Styles und Class Binding

Steff am 8. Januar 2019 um 12:41 Uhr

2019-01-08T12:41:58Z

Steff: /* Expressions (Ausdrücke) in Interpolation verwenden */

2019-01-08T11:28:06Z

Expressions (Ausdrücke) in Interpolation verwenden

Steff: /* Beispiel Direktive v-vor */

2019-01-08T11:27:42Z

Beispiel Direktive v-vor

@@ Zeile 10: / Zeile 10: @@
   [[Vue CLI]]
   [[Vue - Components]]
   [[Vue - Snippets]]

@@ Zeile 8: / Zeile 8: @@
   [[Vue.js]]
   [[Vue - Basic Concepts]]
   [[Vue - Components]]
   [[Vue - Snippets]]
 == Vue Templates ==

@@ Zeile 5: / Zeile 5: @@
   [[alpine.js]] - Alternative mit weniger overhead die sich als jQuery mit "deklarativem Ansatz" und inspiriert von Tailwind, Vue etc. sieht.
-== Vue Snippets ==
+== Links ==
   [[Vue - Snippets]]
 == Vue Templates ==
 === Interpolation and Directives ===
 ==== Text Interpolation ====
-Die einfachste Form der Interpolation ist Text-Interpolation. Hier wird einfach ein String der in der Component Logic ist ausgegeben. Die Ausgabe erfolgt wenn man den Variablennamen in '''doppelte geschweifte Klammern''' setzt. Das geht allerdings '''nicht in HTML Attributen'''.
+Die einfachste Form der Interpolation ist Text-Interpolation. Hier wird einfach ein String der in der Component Logic ist ausgegeben. Die Ausgabe erfolgt wenn man den Variablennamen in '''doppelte geschweifte Klammern''' setzt. Das geht allerdings '''nicht in HTML Attributen'''. In Attributen nutzt man v-bind.
 Beispiel:

← Nächstältere Version		Version vom 18. Dezember 2020, 07:22 Uhr
Zeile 1:		Zeile 1:
−	~~Siehe~~ auch	+	== Einführung ==
		+	Vue ist ein gutes Framework für WebApps, kann aber auch nur zum Teilrendering eingesetzt werden. Behalte im Blick das Webapps aus Quellcode Sicht problematisch für die Suchmaschinen ist.
		+
		+	Wenn du nicht unbedingt eine Webapp bauen möchtest aber gerne einige Features von Vue nutzen möchtest (2-way-binding...) ist evtl. alpine.js nützlich)
	[[alpine.js]] - Alternative mit weniger overhead die sich als jQuery mit "deklarativem Ansatz" und inspiriert von Tailwind, Vue etc. sieht.		[[alpine.js]] - Alternative mit weniger overhead die sich als jQuery mit "deklarativem Ansatz" und inspiriert von Tailwind, Vue etc. sieht.

← Nächstältere Version		Version vom 18. Dezember 2020, 07:20 Uhr
Zeile 1:		Zeile 1:
		+	Siehe auch
		+	[[alpine.js]] - Alternative mit weniger overhead die sich als jQuery mit "deklarativem Ansatz" und inspiriert von Tailwind, Vue etc. sieht.
		+
	== Vue Snippets ==		== Vue Snippets ==
	[[Vue - Snippets]]		[[Vue - Snippets]]

← Nächstältere Version		Version vom 16. Dezember 2020, 20:20 Uhr
Zeile 1:		Zeile 1:
		+	== Vue Snippets ==
		+	[[Vue - Snippets]]
	== Vue Templates ==		== Vue Templates ==
	=== Interpolation and Directives ===		=== Interpolation and Directives ===

← Nächstältere Version		Version vom 8. Januar 2019, 13:29 Uhr
Zeile 205:		Zeile 205:
	</pre>		</pre>
	Hinweis: Wir erkennen Objekte in der Regel an den Geschweiften (Wigley) Klammern {}		Hinweis: Wir erkennen Objekte in der Regel an den Geschweiften (Wigley) Klammern {}
		+
		+	== User Input und das v-model ==
		+	... z.B. von Formularen wird vom Template an die Logic weitergereicht, verarbeitet und das Ergebnis wieder ans Template übergeben.
		+
		+	=== Ein Input Feld ===
		+	In Skills.vue
		+
		+	Template Section:
		+	<input type="text" placeholder="Enter a skill you have.." v-model="skill">
		+	{{ skill }}
		+	Logic Section:
		+	<pre>
		+	data(){
		+	return{
		+	skill: '',
		+	skills: [
		+	...
		+	</pre>
		+	Interessant hier: schon beim eingeben wird {{skill}} befüllt
		+
		+	=== Methoden ===
		+	Wir erweitern das Ganze und Implementieren zum ersten Mal eine Methode.
		+
		+
		+	== Plugins ==
		+	=== Einbinden ===
		+	Todo
		+	=== Interessante Plugins ===
		+	* vee-validate

← Nächstältere Version		Version vom 8. Januar 2019, 12:41 Uhr
Zeile 115:		Zeile 115:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
		+	==== v-if v-else ====
		+	<pre>
		+	<p v-if="skills.length >= 1">You have more than 1 skill</p>
		+	<p v-else>You have less than or equal to 1 skill</p>
		+	</pre>
		+	== Styles und Class Binding ==
		+	=== Externe CSS Files einbinden ===
		+	<style src="./Skills.css" scoped>
		+	</style>
		+	=== Class Binding ===
		+	in skills.js
		+	<div v-bind:class="{ alert: showAlert}"></div>
		+	Setzte die Klasse ''.alert'', aber '''nur wenn showAlert true ist'''.
		+	<pre>
		+	data() {
		+	return {
		+	... ,
		+	showAlert: true // Add this
		+	}
		+	},
		+	</pre>
		+	Definiert die Eigenschaft ''showAlert''
		+
		+	Dann noch den Style damit wir etwas sehen können:
		+	<pre>
		+	<style scoped>
		+	.alert {
		+	background-color: yellow;
		+	width:100%;
		+	height: 30px;
		+	}
		+	</style>
		+	</pre>
		+
		+	Auch der '''Not Operator''' funktioiniert:
		+	{ alert: !showAlert}
		+
		+	Mehrere Klassen und ifs kann man zusammenfassen. Hier wird another-class über die Property showClass gesetzt (in Anführungszeichen wegen dem minus):
		+	<div v-bind:class="{ alert: showAlert, 'another-class': showClass }"></div>
		+	==== Variante v-bind:class mit Objekt ====
		+	Man kann den HTML Code sauberer halten, wenn man als Klassenname ein Objekt einsetzt und die Klasse in der Logic implementiert:
		+	Template
		+	<div v-bind:class="alertObject"></div>
		+	Logic Teil:
		+	<pre>
		+	data() {
		+	return {
		+	skills: [
		+	{ "skill": "Vue.js" },
		+	{ "skill": "Frontend Developer" }
		+	],
		+	alertObject: {
		+	alert: true,
		+	// More classes here if you want..
		+	}
		+	}
		+	},
		+	</pre>
		+
		+	==== Style Attribut steuern mit Vue Style Binding ====
		+	Template Teil
		+	<div v-bind:style="{ backgroundColor: bgColor, width: bgWidth, height: bgHeight }"></div>
		+	Logic Teil
		+	<pre>
		+	data() {
		+	return {
		+	skills: [
		+	{ "skill": "Vue.js" },
		+	{ "skill": "Frontend Developer" }
		+	],
		+	bgColor: 'yellow',
		+	bgWidth: '100%',
		+	bgHeight: '30px'
		+	}
		+	},
		+	</pre>
		+
		+	oder besser als Objekt:
		+	Template Teil
		+	<div v-bind:style="alertObject"></div>
		+
		+	Logic Teil
		+	<pre>
		+	alertObject: {
		+	bgColor: 'yellow',
		+	bgWidth: '100%',
		+	bgHeight: '30px'
		+	}
		+	</pre>
		+	Hinweis: Wir erkennen Objekte in der Regel an den Geschweiften (Wigley) Klammern {}

@@ Zeile 66: / Zeile 66: @@
 Man kann auch Conditionals nutzen. Basierend auf dem Code oben fügen wir im Template Teil der Komponente hinzu:
- {{ btnState ? 'Button ist aktiv' : 'Button ist deaktiviert'}}
+<pre>
 Das gibt Button ist deaktiviert aus, da btnState ja auf true steht.

@@ Zeile 86: / Zeile 86: @@
      v-once
 </pre>
-==== Beispiel Direktive v-vor ====
+==== Beispiel Direktive v-for ====
-Die
+In der Component Skills.vue im Template-Teil