L'objet data dans Vue

La base d'un composant sont les données que nous allons manipuler. Ces données sont stockées dans un objet spécial data. Cet objet doit être retourné comme résultat d'une méthode spéciale :

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

Stockons dans une propriété de l'objet de données un texte quelconque :

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

Les données stockées peuvent être affichées dans le template. Cela se fait avec des doubles accolades, à l'intérieur desquelles on écrit le nom de la propriété dont on veut afficher la valeur. Affichons les valeurs de nos propriétés :

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

Maintenant, faisons en sorte que chaque message s'affiche dans son propre paragraphe :

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

Supposons que data contienne le prénom et le nom de l'utilisateur :

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

Affichez chaque propriété dans une balise div séparée.