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

Kowa: /* SectionForm.vue */

2025-05-12T12:45:22Z

SectionForm.vue

← Nächstältere Version		Version vom 12. Mai 2025, 12:45 Uhr
Zeile 225:		Zeile 225:
	session = storeSession(),		session = storeSession(),
	greeting = storeGreeting(),		greeting = storeGreeting(),
			reset = () => { greeting.reset(); session.setFocus() },
	sayHello = () => session.section = 'hello'		sayHello = () => session.section = 'hello'
	</script>		</script>
Zeile 242:		Zeile 243:
	</div>		</div>
	<div>		<div>
	<FormButton label="Reset" type="reset" @click="~~session.setFocus~~"/>		<FormButton label="Reset" type="reset" @click="reset"/>
	<FormButton label="Say Hello" type="button" @click="sayHello"/>		<FormButton label="Say Hello" type="button" @click="sayHello"/>
	</div>		</div>

Kowa am 12. Mai 2025 um 12:43 Uhr

2025-05-12T12:43:55Z

← Nächstältere Version		Version vom 12. Mai 2025, 12:43 Uhr
Zeile 162:		Zeile 162:
	</syntaxhighlight>		</syntaxhighlight>

	Das ~~PLazhleter~~-Element, das im leeren Textfeld angezeigt wird, sollte in der Greeting-Datei festgelegt werden werden.		Das PLazhalter-Element, das im leeren Textfeld angezeigt wird, sollte in der Greeting-Datei festgelegt werden werden.

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">

Kowa: /* FormTextfield.vue */

2025-05-12T09:02:18Z

FormTextfield.vue

← Nächstältere Version		Version vom 12. Mai 2025, 09:02 Uhr
Zeile 165:		Zeile 165:

	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	/* /src/store/~~StroeGreeting~~.js */		/* /src/store/StoreGreeting.js */

	...		...
Zeile 176:		Zeile 176:
	{ const		{ const
	state =		state =
	reactive({ placeholder: 'name', name: '', stranger: 'Stranger', hello: 'Hello, $1!' }),		reactive({ placeholder: 'Your name', name: '', stranger: 'Stranger', hello: 'Hello, $1!' }),

	...		...

Kowa: /* FormTextfield.vue */

2025-05-12T09:01:30Z

FormTextfield.vue

← Nächstältere Version		Version vom 12. Mai 2025, 09:01 Uhr
Zeile 116:		Zeile 116:
	text: { type: String, default: '' },		text: { type: String, default: '' },
	autofocus: { type: Boolean, default: false },		autofocus: { type: Boolean, default: false },
	placeholder: { type: String, default: '~~Your name~~' },		placeholder: { type: String, default: '' },
	}),		}),
	inputId = useId(),		inputId = useId(),

Kowa: /* FormTextfield.vue */

2025-05-09T14:29:57Z

FormTextfield.vue

← Nächstältere Version		Version vom 9. Mai 2025, 14:29 Uhr
Zeile 160:		Zeile 160:

	@import 'Form.css';		@import 'Form.css';
			</syntaxhighlight>

			Das PLazhleter-Element, das im leeren Textfeld angezeigt wird, sollte in der Greeting-Datei festgelegt werden werden.

			<syntaxhighlight lang="javascript">
			/* /src/store/StroeGreeting.js */

			...
			const
			storeGreeting =
			defineStore
			( 'greeting',

			() =>
			{ const
			state =
			reactive({ placeholder: 'name', name: '', stranger: 'Stranger', hello: 'Hello, $1!' }),

			...

			placeholder =
			toRef(state, 'placeholder'),

			...

			return { init, placeholder, name, helloStranger, hello }
			}
			)

			...
	</syntaxhighlight>		</syntaxhighlight>

Kowa: /* SectionForm.vue */

2025-05-09T14:25:32Z

SectionForm.vue

← Nächstältere Version		Version vom 9. Mai 2025, 14:25 Uhr
Zeile 208:		Zeile 208:
	@enter="sayHello"		@enter="sayHello"
	autofocus		autofocus
			:placeholder="greeting.placeholder"
	/>		/>
	</div>		</div>

Kowa: /* FormTextfield.vue */

2025-05-09T14:21:21Z

FormTextfield.vue

← Nächstältere Version		Version vom 9. Mai 2025, 14:21 Uhr
Zeile 113:		Zeile 113:
	const		const
	props = defineProps		props = defineProps
	({ label: { type: String, default: '' },		({ label: { type: String, default: '' },
	text: { type: String, default: '' },		text: { type: String, default: '' },
	autofocus: { type: Boolean, default: false }		autofocus: { type: Boolean, default: false },
			placeholder: { type: String, default: 'Your name' },
	}),		}),
	inputId = useId(),		inputId = useId(),
Zeile 123:		Zeile 124:
	emit = defineEmits(['update:text', 'enter']),		emit = defineEmits(['update:text', 'enter']),
	text = computed		text = computed
	({ get() { return props.text },		({ get() { return props.text },
	set(~~p_value~~) { return emit('update:text', ~~p_value~~) }		set(p_text) { return emit('update:text', p_text) }
	}),		}),
	enter = () => emit('enter'),		enter = () => emit('enter'),
Zeile 138:		Zeile 139:
	<div>		<div>
	<label :for="inputId" v-if="label !== ''">{{label}}</label>		<label :for="inputId" v-if="label !== ''">{{label}}</label>
	<input :id="inputId" type="text" v-model="text" :autofocus>		<input :id="inputId" type="text" v-model="text" :autofocus :placeholder>
	</div>		</div>
	</template>		</template>

Kowa: /* Modularisieren der Hello-World-Komponente */

2025-05-07T08:39:28Z

Modularisieren der Hello-World-Komponente

← Nächstältere Version		Version vom 7. Mai 2025, 08:39 Uhr
Zeile 321:		Zeile 321:
	@import 'component.css';		@import 'component.css';
	</syntaxhighlight>		</syntaxhighlight>

			== Dynamisches Laden von Komponenten “below the fold” ==

	In der Hello-World Komponente sollten nur die Komponenten statisch geladen werden, die		In der Hello-World Komponente sollten nur die Komponenten statisch geladen werden, die
Zeile 335:		Zeile 337:

	const		const
	session = storeSession(),		session = storeSession(),
	helloComponent =		helloComponent =
	computed(() => defineAsyncComponent		computed(() => defineAsyncComponent(() => import('/component/section/SectionHello.vue')))
	(() => import('/component/section/SectionHello.vue')))

	// const in code: session should be initialized via a config file		// const in code: session should be initialized via a config file
	session.init('form')		session.init('form')
	</script>		</script>

Zeile 352:		Zeile 353:
	@import '/css/component/HelloWorld.css';		@import '/css/component/HelloWorld.css';
	</style>		</style>
			</syntaxhighlight>

			Beim Build-Prozess werden nun zwei JavaScript-Dateien erstellt.
			Die Hauptdatei wird zu Beginn der Anwendung geladen, die zweite wird asynchron nachgeladen.

	~~</syntaxhighlight>~~		In diesem Fall bringt diese Art der Optimierung nichts, da der Code zum dynamischen NAchladen von JavaScript-Komponenten die Hauptdatei um ca. 3 KByte vergrößert, der JavaScript-Code für die Hello-Komponenten aber nur wenige Hundert Byte groß ist. Bei komplexeren Beispielen ist dieses Vorgehen allerdings zu empfehlen.

	== Bereinigen der Datei <code>body.css</code> ==		== Bereinigen der Datei <code>body.css</code> ==

Kowa: /* SectionHello.vue */

2025-04-14T08:25:44Z

SectionHello.vue

← Nächstältere Version		Version vom 14. April 2025, 08:25 Uhr
Zeile 243:		Zeile 243:

	<script setup>		<script setup>
			import storeSession from '/store/StoreSession'
	import storeGreeting from '/store/StoreGreeting'		import storeGreeting from '/store/StoreGreeting'
	~~import storeSession from '/store/StoreSession'~~

	const		const
	~~greeting~~ = ~~storeGreeting~~(),		session = storeSession(),
	~~session~~ = ~~storeSession~~()		greeting = storeGreeting()
	</script>		</script>

Kowa am 11. April 2025 um 13:12 Uhr

2025-04-11T13:12:44Z

← Nächstältere Version		Version vom 11. April 2025, 13:12 Uhr
Zeile 1:		Zeile 1:
	{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}		{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

	v04:   [https://glossar.hs-augsburg.de/beispiel/tutorium/~~2045~~/wk_hello_world/wk_hello_world_vue/web_v04/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%~~2F2045~~%2Fwk_hello_world%2Fwk_hello_world_vue%2Fweb_v04%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%~~2F2045~~%2Fwk_hello_world%2Fwk_hello_world_vue%2Fweb_v04%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%~~2F2045~~%2Fwk_hello_world%2Fwk_hello_world_vue%2Fweb_v04%2Findex.html Google PageSpeed])<br/>		v04:   [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v04/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%2Fweb_v04%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%2Fweb_v04%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%2Fweb_v04%2Findex.html Google PageSpeed])<br/>
	v04a: [https://glossar.hs-augsburg.de/beispiel/tutorium/~~2045~~/wk_hello_world/wk_hello_world_vue/web_v04a/index.html <code>index.html</code>] ([https://validator.nu/?doc=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%~~2F2045~~%2Fwk_hello_world%2Fwk_hello_world_vue%2Fweb_v04a%2Findex.html HTML validate], [https://css-validator.org/validator?uri=https%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%~~2F2045~~%2Fwk_hello_world%2Fwk_hello_world_vue%2Fweb_v04a%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%~~2F2045~~%2Fwk_hello_world%2Fwk_hello_world_vue%2Fweb_v04a%2Findex.html Google PageSpeed])<br/><br/>		v04a: [https://glossar.hs-augsburg.de/beispiel/tutorium/2025/wk_hello_world/wk_hello_world_vue/web_v04a/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%2Fweb_v04a%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%2Fweb_v04a%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%2Fweb_v04a%2Findex.html Google PageSpeed])<br/><br/>
	[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v04</code>/<code>git checkout v04a</code> (JavaScript)		[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v04</code>/<code>git checkout v04a</code> (JavaScript)