Το αντικείμενο data στο Vue

Η βάση ενός component είναι τα δεδομένα, με τα οποία θα χειριζόμαστε. Αυτά τα δεδομένα αποθηκεύονται σε ένα ειδικό αντικείμενο data. Αυτό το αντικείμενο πρέπει να επιστρέφεται ως αποτέλεσμα ενός ειδικού μεθόδου:

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

Ας αποθηκεύσουμε στην ιδιότητα του αντικειμένου δεδομένων κάποιο κείμενο:

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

Τα δεδομένα που αποθηκεύονται μπορούν να εμφανιστούν στην προβολή. Αυτό γίνεται σε διπλές σγουρές αγκύλες, στις οποίες γράφεται το όνομα της ιδιότητας, της οποίας την τιμή θέλουμε να εμφανίσουμε. Ας εμφανίσουμε τις τιμές των ιδιοτήτων μας:

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

Και τώρα ας κάνουμε έτσι ώστε κάθε ένα από τα μηνύματά μας να εμφανίζεται στη δική της παράγραφο:

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

Ας αποθηκεύεται στο data το όνομα και το επώνυμό του χρήστη:

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

Εμφανίστε κάθε ιδιότητα σε ξεχωριστή ετικέτα div.