Vue의 data 객체

컴포넌트의 기초는 우리가 조작할 데이터입니다. 이 데이터는 특별한 객체 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 태그에 출력하세요.