Data object in Vue

De basis van een component zijn de gegevens, die we zullen manipuleren. Deze gegevens worden opgeslagen in een speciaal object data. Dit object moet geretourneerd worden als resultaat van een speciale methode:

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

Laten we een bepaalde tekst opslaan in een eigenschap van het gegevensobject:

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

De opgeslagen gegevens kunnen worden weergegeven in de template. Dit wordt gedaan in dubbele accolades, waarin de naam van de eigenschap wordt geschreven, waarvan we de waarde willen weergeven. Laten we de waarden van onze eigenschappen weergeven:

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

En laten we het nu zo maken dat elk van onze berichten in zijn eigen alinea wordt weergegeven:

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

Stel dat in data de voornaam en achternaam van de gebruiker worden opgeslagen:

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

Geef elke eigenschap weer in een aparte div tag.