Объект data в Vue

Основой компонента являются данные, которыми мы будем манипулировать. Эти данные хранятся в специальном объекте 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.