Dvosmerno povezovanje podatkov z vnosi v Vue

Trenutno se bomo naučili dela z vnosi v ogrodju Vue. Z njihovo pomočjo bomo reaktivno dodajali podatke na stran. Pridimo k delu. Naj imamo vnos:

<template>
	<input>
</template>

Naj imamo tudi lastnost message:

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

To lastnost in vnos lahko povežemo tako, da sprememba katere koli od njiju povzroči spremembo druge. To naredimo z direktivo v-model, v kateri je navedena lastnost, povezana z vnosom.

Povežimo lastnost message z našim vnosom:

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

Po zagonu koda bo v vnosu besedilo lastnosti message. In če uredite podatke v vnosu - se bo lastnost ustrezno spremenila. Da bi to videli, izpišimo vsebino, vneseno v vnos, nekje v odstavku:

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

Podan je vnos. Naredite tako, da se besedilo, vneseno v vnos, takoj izpiše v odstavku pod njim.

Spremenite prejšnjo nalogo tako, da se besedilo izpiše v zgornji registri.

Podan je vnos. Naj vanj vnašajo številko. Naredite tako, da se v odstavku med vnašanjem izpiše kvadrat vnesene številke.