Vue 프레임워크의 반응성

data의 데이터 변경은 해당 데이터의 페이지 표시를 즉시 변경시킵니다. Vue의 이러한 동작을 반응성이라고 부릅니다.

실제로 확인해 보겠습니다. 다음과 같은 속성이 있다고 가정합시다:

data() {
	return {
		text: 'xxx',
	}
}

이 속성의 값을 출력해 봅시다:

<template>
	{{ text }}
</template>

클릭 시 속성이 변경되는 버튼을 만들어 봅시다:

<template>
	{{ text }}
	<button @click="change">text</button>
</template>

이제 버튼 클릭 시 호출되어 속성을 변경할 메서드를 작성해 봅시다:

methods: {
	change: function() {
		this.text = 'yyy';
	}
}

모든 코드를 합쳐서 버튼을 누르면 화면의 텍스트가 반응적으로 다른 텍스트로 변경됩니다.

속성 text가 주어집니다. 이 속성의 내용을 어떤 문단에 출력하세요.

버튼이 주어집니다. 이 버튼을 클릭했을 때 속성 text의 값이 반응적으로 다른 값으로 변경되도록 만드세요.

두 개의 버튼이 주어집니다. 첫 번째 버튼 클릭 시 속성 text의 값이 반응적으로 하나의 값으로 변경되고, 두 번째 버튼 클릭 시에는 다른 값으로 변경되도록 만드세요.