HTML5-Tutorium: JavaScript: Hello World Vue 01 - Versionsgeschichte

Kowa am 17. April 2025 um 07:56 Uhr

2025-04-17T07:56:49Z

← Nächstältere Version		Version vom 17. April 2025, 07:56 Uhr
Zeile 177:		Zeile 177:
	"/controller/": ["./src/controller/"],		"/controller/": ["./src/controller/"],
	"/service/": ["./src/service/"],		"/service/": ["./src/service/"],
	"/component/": ["'./src/component/"],		"/component/": ["./src/component/"],
	"/store/": ["./src/store/"]		"/store/": ["./src/store/"]
	}		}

Kowa am 17. April 2025 um 07:03 Uhr

2025-04-17T07:03:17Z

← Nächstältere Version		Version vom 17. April 2025, 07:03 Uhr
Zeile 241:		Zeile 241:
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<script setup>		<script setup>
	import HelloWorld from './~~components~~/HelloWorld.vue'		import HelloWorld from './component/HelloWorld.vue'
	</script>		</script>

Zeile 255:		Zeile 255:
	Der Ordner <code>src/assets</code> wird nun nicht mehr benötigt und kann gelöscht werden ebenso wie die anderen beiden Komponenten.		Der Ordner <code>src/assets</code> wird nun nicht mehr benötigt und kann gelöscht werden ebenso wie die anderen beiden Komponenten.

	=== <code>src/~~components~~/HelloWorld.vue</code> ===		=== <code>src/component/HelloWorld.vue</code> ===

	In die HelloWorld-Komponente werden die beiden Sections aus der Hello-World-06-App eingefügt.		In die HelloWorld-Komponente werden die beiden Sections aus der Hello-World-06-App eingefügt.
Zeile 261:		Zeile 261:
	'''Sections aus index.html in Template-Element einfügen.'''<br />		'''Sections aus index.html in Template-Element einfügen.'''<br />
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<!-- src/~~components~~/HelloWorld.vue -->		<!-- src/component/HelloWorld.vue -->

	<template>		<template>
Zeile 285:		Zeile 285:

	Sectionspezifische CSS-Anweisungen aus der Hello-World-06-App werden in die Datei <code>src/css/HelloWorld.css</code> verschoben.		Sectionspezifische CSS-Anweisungen aus der Hello-World-06-App werden in die Datei <code>src/css/HelloWorld.css</code> verschoben.
	Diese Datei wird in der Komponetne in <code>src/~~components~~/HelloWorld.vue</code> als Style importiert (<code>import '@/css/~~components~~/HelloWorld';</code> ).		Diese Datei wird in der Komponetne in <code>src/component/HelloWorld.vue</code> als Style importiert (<code>import '@/css/component/HelloWorld';</code> ).

	'''CSS für die Hello-World-Komponente'''<br/>		'''CSS für die Hello-World-Komponente'''<br/>
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	/* src/css/~~components~~/HelloWorld.css */		/* src/css/component/HelloWorld.css */

	/* Hier wird alles aus der Datei body.css übernommen,		/* Hier wird alles aus der Datei body.css übernommen,
Zeile 304:		Zeile 304:

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<!-- src/~~components~~/HelloWorld.vue -->		<!-- src/component/HelloWorld.vue -->

	<style scoped lang="css">		<style scoped lang="css">
Zeile 317:		Zeile 317:
	'''Script für die HelloWorld-Komponenten'''<br/>		'''Script für die HelloWorld-Komponenten'''<br/>
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	<!-- src/~~components~~/HelloWorld.vue -->		<!-- src/component/HelloWorld.vue -->

	<script setup>		<script setup>

Kowa: /* Überführung von hello-world-06 nach vue */

2025-04-17T07:01:59Z

Überführung von hello-world-06 nach vue

← Nächstältere Version		Version vom 17. April 2025, 07:01 Uhr
Zeile 172:		Zeile 172:
	"paths":		"paths":
	{ "@/": ["./src/"],		{ "@/": ["./src/"],
			"config.css": ["./src/css/_config.css"],
	"/css/": ["./src/css/.css"],		"/css/": ["./src/css/.css"],
	"/js/": ["./src/js/"],		"/js/": ["./src/js/"],

Kowa: /* Überführung von hello-world-06 nach vue */

2025-04-17T07:00:03Z

Überführung von hello-world-06 nach vue

← Nächstältere Version		Version vom 17. April 2025, 07:00 Uhr
Zeile 171:		Zeile 171:
	{ "baseUrl": ".",		{ "baseUrl": ".",
	"paths":		"paths":
	{ "@/": ["./src/"],		{ "@/": ["./src/"],
	"/css/": ["./src/css/.css"]		"/css/": ["./src/css/.css"],
			"/js/": ["./src/js/"],
			"/controller/": ["./src/controller/"],
			"/service/": ["./src/service/"],
			"/component/": ["'./src/component/"],
			"/store/": ["./src/store/"]
	}		}
	},		},

Kowa: /* Erstellen eines neuen Projekts */

2025-04-17T06:55:54Z

Erstellen eines neuen Projekts

← Nächstältere Version		Version vom 17. April 2025, 06:55 Uhr
Zeile 97:		Zeile 97:

	Vue-Anwendungen sind aus Komponenten aufgebaut.		Vue-Anwendungen sind aus Komponenten aufgebaut.
	Das passt sehr gut [https://atomicdesign.bradfrost.com/chapter-2/ Atomic-Design-Prinzip].		Das passt sehr gut zum [https://atomicdesign.bradfrost.com/chapter-2/ Atomic-Design-Prinzip].

	== Überführung von <code>hello-world-06</code> nach vue ==		== Überführung von <code>hello-world-06</code> nach vue ==

Kowa: /* Anmerkungen */

2025-04-17T06:55:31Z

Anmerkungen

← Nächstältere Version		Version vom 17. April 2025, 06:55 Uhr
Zeile 87:		Zeile 87:

	Vue basierte bis Version 3.0 auf Webpack.		Vue basierte bis Version 3.0 auf Webpack.
	Webpack gilt allerdings schon wieder als Dinosaurier (existiert seit 2012)		Webpack gilt allerdings schon wieder als Dinosaurier (existiert seit 2012).

	Seit Version 3.2 verwendet Vue Vite (französisch „schnell“).		Seit Version 3.2 verwendet Vue Vite (französisch „schnell“).
Zeile 94:		Zeile 94:

	Vue 3 unterstützt im Gegensatz zu Vue 2 TypeScript.		Vue 3 unterstützt im Gegensatz zu Vue 2 TypeScript.
	Allerdings ~~wir~~ im Tutorium Typescript nicht eingesetzt.		Allerdings wird im Tutorium Typescript nicht eingesetzt.

	Vue-Anwendungen sind aus Komponenten aufgebaut.		Vue-Anwendungen sind aus Komponenten aufgebaut.

Kowa: /* Alternative Skript-Varianten */

2025-04-17T06:54:05Z

Alternative Skript-Varianten

← Nächstältere Version		Version vom 17. April 2025, 06:54 Uhr
Zeile 446:		Zeile 446:
	name = ref(''),		name = ref(''),

	hello = computed(() => name.value === '' ? helloStranger.value : `Hello, ${name.value}!`),		hello = computed(() => name.value === '' ? helloStranger.value : `Hello, ${name.value}!`),
	sayHello = () => section.value = 'hello',		sayHello = () => section.value = 'hello',
	autofocus = () => document.getElementById('input_name').focus(),		autofocus = () => document.getElementById('input_name').focus(),
			visOn = () => window.addEventListener('visibilitychange', autofocus),
			visOff = () => window.removeEventListener('visibilitychange', autofocus)

	onMounted		onMounted (visOn);
	~~( () =>~~		onUnmounted(visOff);
	~~{ window.addEventListener~~(~~'visibilitychange', autofocus~~); }
	)

	onUnmounted
	( (~~) =>~~
	~~{ window.removeEventListener('visibilitychange', autofocus~~); }
	)
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>
Zeile 476:		Zeile 471:
	name = ref(''),		name = ref(''),

	hello = computed(() => name.value === '' ? helloStranger.value : `Hello, ${name.value}!`),		hello = computed(() => name.value === '' ? helloStranger.value : `Hello, ${name.value}!`),
	sayHello = () => section.value = 'hello',		sayHello = () => section.value = 'hello',
	autofocus = () => document.getElementById('input_name').focus(),		autofocus = () => document.getElementById('input_name').focus(),
			visOn = () => window.addEventListener('visibilitychange', autofocus),
	~~onMounted~~		visOff = () => window.removeEventListener('visibilitychange', autofocus)
	( () =>
	{ window.addEventListener('visibilitychange', autofocus)~~; }~~
	)

	~~onUnmounted~~		onMounted (visOn);
	( () =>		onUnmounted(visOff);
	~~{ window.removeEventListener~~(~~'visibilitychange', autofocus~~); }
	)

	return {		return {
Zeile 533:		Zeile 523:

	mounted()		mounted()
	{ window.addEventListener('visibilitychange', this.autofocus).bind(this); },		{ window.addEventListener('visibilitychange', this.autofocus).bind(this) },

	unmounted()		unmounted()
	{ window.removeEventListener('visibilitychange', this.autofocus).bind(this); }		{ window.removeEventListener('visibilitychange', this.autofocus).bind(this) }
	}		}
	</script>		</script>

Kowa: /* src/components/HelloWorld.vue */

2025-04-17T06:52:45Z

src/components/HelloWorld.vue

← Nächstältere Version		Version vom 17. April 2025, 06:52 Uhr
Zeile 387:		Zeile 387:
	sayHello = () => section.value = 'hello',		sayHello = () => section.value = 'hello',
	autofocus = () => document.getElementById('input_name').focus(),		autofocus = () => document.getElementById('input_name').focus(),
			visOn = () => window.addEventListener('visibilitychange', autofocus),
			visOff = () => window.removeEventListener('visibilitychange', autofocus)

	onMounted		onMounted (visOn);
	( (~~) =>~~		onUnmounted(visOff);
	~~{ window.addEventListener('visibilitychange', autofocus~~); }
	)
	onUnmounted
	( (~~) =>~~
	~~{ window.removeEventListener('visibilitychange', autofocus~~); }
	)
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>

Kowa am 11. April 2025 um 13:02 Uhr

2025-04-11T13:02:25Z

← Nächstältere Version		Version vom 11. April 2025, 13:02 Uhr
Zeile 2:		Zeile 2:

	'''Musterlösung'''<br/>		'''Musterlösung'''<br/>
	v01:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/~~wk_hello_world_vue_01~~/web_v01/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01%2Findex.html Google PageSpeed])<br/>		v01:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v01/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01%2Findex.html Google PageSpeed])<br/>
	v01a: [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/~~wk_hello_world_vue_01~~/web_v01a/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01a%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01a%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01a%2Findex.html Google PageSpeed])<br/>		v01a: [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v01a/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01a%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01a%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01a%2Findex.html Google PageSpeed])<br/>
	v01b: [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/~~wk_hello_world_vue_01~~/web_v01b/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01b%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01b%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01b%2Findex.html Google PageSpeed])<br/>		v01b: [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v01b/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01b%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01b%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01b%2Findex.html Google PageSpeed])<br/>
	v01c: [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/~~wk_hello_world_vue_01~~/web_v01c/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01c%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01c%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01c%2Findex.html Google PageSpeed])<br/><br/>		v01c: [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v01c/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01c%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01c%2Findex.html&profile=css21&usermedium=all&warning=1&lang=de CSS validate], [https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2F2025%2Fwk_hello_world%2Fwk_hello_world_vue_01%2Fweb_v01c%2Findex.html Google PageSpeed])<br/><br/>
	[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository]:<br/>		[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository]:<br/>
	<code>git checkout v01</code>, <code>git checkout v01a</code>, <code>git checkout v01b</code>, <code>git checkout v01c</code>		<code>git checkout v01</code>, <code>git checkout v01a</code>, <code>git checkout v01b</code>, <code>git checkout v01c</code>
Zeile 628:		Zeile 628:

	* <code>vite.config.common.js</code>: Enthält alles bis auf <code>postcss-var-replace</code>.		* <code>vite.config.common.js</code>: Enthält alles bis auf <code>postcss-var-replace</code>.
	* <code>vite.config.js</code>: Importiert <code>vite.config.common.js</code> und exportiert das ~~improtierte~~ Objekt. Hier könnten weitere Konfigurationsanweisungen stehen, die speziell für den Development-Modus von Bedeutung sind. Das werden wir in einem späteren Tutorium noch ausnutzen.		* <code>vite.config.js</code>: Importiert <code>vite.config.common.js</code> und exportiert das importierte Objekt. Hier könnten weitere Konfigurationsanweisungen stehen, die speziell für den Development-Modus von Bedeutung sind. Das werden wir in einem späteren Tutorium noch ausnutzen.
	* <code>vite.config.build.js</code>: Importiert ebenfalls <code>vite.config.common.js</code>, bindet aber <code>postcss-var-replace</code> vor dem Export in das Konfigurationsobjekt ein.		* <code>vite.config.build.js</code>: Importiert ebenfalls <code>vite.config.common.js</code>, bindet aber <code>postcss-var-replace</code> vor dem Export in das Konfigurationsobjekt ein.

Kowa: /* src/components/HelloWorld.vue */

2025-04-09T09:59:45Z

src/components/HelloWorld.vue

← Nächstältere Version		Version vom 9. April 2025, 09:59 Uhr
Zeile 390:		Zeile 390:
	onMounted		onMounted
	( () =>		( () =>
	{ window.addEventListener('visibilitychange', autofocus);		{ window.addEventListener('visibilitychange', autofocus); }
	~~autofocus();~~
	}
	)		)
	onUnmounted		onUnmounted
	( () =>		( () =>
	{ window.removeEventListener('visibilitychange', autofocus);		{ window.removeEventListener('visibilitychange', autofocus); }
	}
	)		)
	</script>		</script>

← Nächstältere Version		Version vom 17. April 2025, 07:56 Uhr
Zeile 177:		Zeile 177:
	"/controller/": ["./src/controller/"],		"/controller/": ["./src/controller/"],
	"/service/": ["./src/service/"],		"/service/": ["./src/service/"],
	"/component/": ["'./src/component/"],		"/component/": ["./src/component/"],
	"/store/": ["./src/store/"]		"/store/": ["./src/store/"]
	}		}