Dwukierunkowe wiązanie danych z inputami w Vue

Teraz nauczymy się pracy z inputami w frameworku Vue. Za ich pomocą będziemy reaktywnie dodawać dane na stronę. Zacznijmy. Załóżmy, że mamy input:

<template>
	<input>
</template>

Załóżmy również, że mamy właściwość message:

data() {
	return {
		message: 'hello',
	}
}

Możemy powiązać tę właściwość i input w taki sposób, aby zmiana któregokolwiek z nich prowadziła do zmiany drugiego. Robimy to za pomocą dyrektywy v-model, w której wskazujemy właściwość powiązaną z inputem.

Powiążmy z naszym inputem właściwość message:

<template>
	<input v-model="message">
</template>

Po uruchomieniu kodu w inputie będzie znajdował się tekst właściwości message. A jeśli edytujemy dane w inputcie - właściwość również zmieni się odpowiednio. Aby to zobaczyć, wyświetlmy wprowadzaną do inputa zawartość gdzieś w akapicie:

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

Dany jest input. Spraw, aby wpisywany do inputa tekst od razu wyświetlał się w akapicie pod nim.

Zmodyfikuj poprzednie zadanie tak, aby tekst wyświetlał się w górnym rejestrze.

Dany jest input. Niech będzie do niego wprowadzana liczba. Spraw, aby w akapicie w miarę wpisywania wyświetlał się kwadrat wprowadzanej liczby.