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

Kowa: /* Anpassung des Templates */

2025-05-12T12:57:20Z

Anpassung des Templates

← Nächstältere Version		Version vom 12. Mai 2025, 12:57 Uhr
Zeile 237:		Zeile 237:

	Das Template muss angepasst werden. Man muss nun auf die Store-Objekte zugreifen.		Das Template muss angepasst werden. Man muss nun auf die Store-Objekte zugreifen.

			Achtung, die Funktion <code>reset</code> aktivier nicht nur das Autofokus-Element,
			sondern löscht auch das NAmensfeld im <code>StoreGreeting</code>. Würde man in der
			Funktion <code>reset</code> auf den Aufruf von <code>storeGreeting.reset()</code> verzichten,
			würde der Input-Type <code>reset</code> im unten angegebenen Input-Buttons zwar
			den Inhalt Textfelds im Formular löschen, der zuvor eingegebenen Name stünde aber weiterhin im Greeting-Store. Die bereitet spätestens dann Probleme, wenn man den im Greeting-Store gespeicherten Namen auch a anderer Stelle verwendet.

	<syntaxhighlight lang="ecmascript">		<syntaxhighlight lang="ecmascript">

2025-05-12T12:51:21Z

Einbinden der Stores in eine Komponente

← Nächstältere Version		Version vom 12. Mai 2025, 12:51 Uhr
Zeile 193:		Zeile 193:
	greeting = storeGreeting(),		greeting = storeGreeting(),

			reset = () => { greeting.reset(); session.setFocus() },
	sayHello = () => session.section = 'hello',		sayHello = () => session.section = 'hello',
	sayHelloOnEnter = new ControllerKeys('Enter', inputId, sayHello)		sayHelloOnEnter = new ControllerKeys('Enter', inputId, sayHello)

2025-05-12T12:50:07Z

Anpassung des Templates

← Nächstältere Version		Version vom 12. Mai 2025, 12:50 Uhr
Zeile 249:		Zeile 249:
	</div>		</div>
	<div>		<div>
	<input type="reset" value="Reset" @click="~~session.setFocus~~">		<input type="reset" value="Reset" @click="reset">
	<input type="button" value="Say hello" @click="sayHello">		<input type="button" value="Say hello" @click="sayHello">
	</div>		</div>

2025-05-12T12:46:17Z

StoreGreeting

← Nächstältere Version		Version vom 12. Mai 2025, 12:46 Uhr
Zeile 157:		Zeile 157:
	name =		name =
	toRef(state, 'name'),		toRef(state, 'name'),

			reset =
			() => { name.value = '' },

	sayHello =		sayHello =
Zeile 167:		Zeile 170:
	computed(() => sayHello(state.name))		computed(() => sayHello(state.name))

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

2025-05-09T14:20:03Z

← Nächstältere Version		Version vom 9. Mai 2025, 14:20 Uhr
Zeile 242:		Zeile 242:
	<form>		<form>
	<div>		<div>
	<label :for="inputId">~~Tell me~~ your name?</label>		<label :for="inputId">What´s your name?</label>
	<input :id="inputId" v-model="greeting.name" :autofocus>		<input :id="inputId" v-model="greeting.name" :autofocus>
	</div>		</div>

2025-05-09T14:18:16Z

Anpassung des Templates

← Nächstältere Version		Version vom 9. Mai 2025, 14:18 Uhr
Zeile 242:		Zeile 242:
	<form>		<form>
	<div>		<div>
	<label :for="inputId">~~What is~~ your name?</label>		<label :for="inputId">Tell me your name?</label>
	<input :id="inputId" v-model="greeting.name" :autofocus>		<input :id="inputId" v-model="greeting.name" :autofocus>
	</div>		</div>

2025-05-09T14:17:50Z

Anpassung des Templates

← Nächstältere Version		Version vom 9. Mai 2025, 14:17 Uhr
Zeile 242:		Zeile 242:
	<form>		<form>
	<div>		<div>
	<label :for="inputId">What's your name?</label>		<label :for="inputId">What is your name?</label>
	<input :id="inputId" v-model="greeting.name" :autofocus>		<input :id="inputId" v-model="greeting.name" :autofocus>
	</div>		</div>

2025-05-09T14:10:21Z

Anpassung des Templates

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

	<template>		<template>
	<section>		<section v-if="session.section==='form'">
	<h1>{{greeting.helloStranger}}</h1>		<h1>{{greeting.helloStranger}}</h1>
	<form>		<form>
	<div>		<div>
	<~~FormTextfield~~ label="What's your name?"		<label :for="inputId">What's your name?</label>
	v-model~~:text~~="greeting.name"		<input :id="inputId" v-model="greeting.name" :autofocus>
	~~@enter="sayHello"~~
	autofocus
	/>
	</div>		</div>
	<div>		<div>
	<~~FormButton label~~="~~Reset~~" ~~type~~="~~reset~~" @click="session.setFocus"/>		<input type="reset" value="Reset" @click="session.setFocus">
	<~~FormButton label~~="~~Say Hello~~" ~~type~~="~~button~~" @click="sayHello"/>		<input type="button" value="Say hello" @click="sayHello">
	</div>		</div>
	</form>		</form>
			</section>
			<section v-if="session.section==='hello'">
			<h1>{{greeting.hello}}</h1>
			<p>Welcome to Full-Stack Web Development!</p>
	</section>		</section>
	</template>		</template>

2025-05-07T14:32:19Z

StoreSession

← Nächstältere Version		Version vom 7. Mai 2025, 14:32 Uhr
Zeile 107:		Zeile 107:
	() =>		() =>
	{ const		{ const
	section =		section = ref(''),
	ref(''),		autofocus = reactive({ setFocus: null }),

	~~autofocus~~ =		init =
	~~reactive(~~{ ~~setFocus: null~~ }),		p_section => { section.value = p_section },

	~~init~~ =		initAutofocus =
	(~~p_section,~~ p_autofocus_id = null) =>		(p_autofocus_id = null) =>
	{ ~~section.value = p_section;~~		{ if (p_autofocus_id != null)

	if (p_autofocus_id != null)
	{ autofocus.setFocus = () => document.getElementById(p_autofocus_id).focus(),		{ autofocus.setFocus = () => document.getElementById(p_autofocus_id).focus(),
	window.addEventListener('visibilitychange', autofocus.setFocus);		window.addEventListener('visibilitychange', autofocus.setFocus);
Zeile 126:		Zeile 124:
	() => autofocus?.setFocus()		() => autofocus?.setFocus()

	return { init, section, setFocus }		return { init, initAutofocus, section, setFocus }
	}		}
	)		)

2025-05-07T14:24:20Z

StoreSession

← Nächstältere Version		Version vom 7. Mai 2025, 14:24 Uhr
Zeile 107:		Zeile 107:
	() =>		() =>
	{ const		{ const
	section = ref(''),		section =
	autofocus = reactive({ setFocus: null }),		ref(''),

			autofocus =
			reactive({ setFocus: null }),

	init =		init =
	(p_section, p_autofocus_id = null) =>		(p_section, p_autofocus_id = null) =>
	{ section.value = p_section;		{ section.value = p_section;

	if (p_autofocus_id != null)		if (p_autofocus_id != null)
	{ ~~window.removeEventListener('visibilitychange', autofocus.setFocus);~~		{ autofocus.setFocus = () => document.getElementById(p_autofocus_id).focus(),
	autofocus.setFocus = () => document.getElementById(p_autofocus_id).focus(),
	window.addEventListener('visibilitychange', autofocus.setFocus);		window.addEventListener('visibilitychange', autofocus.setFocus);
	}		}

	},		},

Zeile 127:		Zeile 129:
	}		}
	)		)

	~~export default storeSession~~

	export default storeSession		export default storeSession