The data object in Vue

The core of the component is the data we will manipulate. This data is stored in a special object data. This object should be returned by the result of a special method:

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

Let's store some text in the data object property:

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

Stored data can be output in a view. This is done in double curly brackets, in which the name of the property whose value we want to output is written. Let's output the values of our properties:

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

Now let's make it so that each of our messages is displayed in its own paragraph:

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

Let data store the user's first and last name:

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

Output each property in a separate div tag.