L'oggetto data in Vue

La base di un componente sono i dati che manipoleremo. Questi dati sono memorizzati in un apposito oggetto data. Questo oggetto deve essere restituito come risultato di un metodo specifico:

export default {
	data() {
		return {
			
		}
	}
}

Memorizziamo nella proprietà dell'oggetto dati un po' di testo:

data() {
	return {
		text1: '111',
		text2: '222',
	}
}

I dati memorizzati possono essere visualizzati nella vista. Questo si fa con le doppie parentesi graffe, all'interno delle quali si scrive il nome della proprietà il cui valore vogliamo visualizzare. Visualizziamo i valori delle nostre proprietà:

<template>
	{{ text1 }}
	{{ text2 }}
</template>

Ora facciamo in modo che ogni nostro messaggio venga visualizzato nel proprio paragrafo:

<template>
	<p>{{ text1 }}</p>
	<p>{{ text2 }}</p>
</template>

Supponiamo che in data siano memorizzati il nome e il cognome dell'utente:

data() {
	return {
		name: 'john',
		surn: 'smit',
	}
}

Visualizza ogni proprietà in un tag div separato.