Vue에서 인풋에 데이터 양방향 바인딩하기

지금부터 Vue 프레임워크에서 인풋을 다루는 법을 배워보겠습니다. 인풋을 사용하여 페이지에 데이터를 반응적으로 추가할 것입니다. 시작해 봅시다. 다음과 같은 인풋이 있다고 가정하겠습니다:

<template>
	<input>
</template>

또한, 다음과 같은 속성 message가 있다고 가정해 봅시다:

data() {
	return {
		message: 'hello',
	}
}

우리는 이 속성과 인풋을 둘 중 하나를 변경하면 다른 하나도 변경되도록 연결할 수 있습니다. 이는 인풋에 바인딩된 속성을 지정하는 디렉티브 v-model를 사용하여 수행됩니다.

우리 인풋에 message 속성을 바인딩해 보겠습니다:

<template>
	<input v-model="message">
</template>

코드를 실행한 후, 인풋에는 message 속성의 텍스트가 표시됩니다. 그리고 인풋의 데이터를 수정하면 속성도 그에 따라 변경됩니다. 이를 확인하기 위해, 인풋에 입력된 내용을 문단 어딘가에 출력해 보겠습니다:

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

인풋이 주어집니다. 인풋에 입력된 텍스트가 바로 아래 문단에 출력되도록 만드세요.

이전 문제를 수정하여 텍스트가 대문자로 출력되도록 하세요.

인풋이 주어집니다. 인풋에 숫자를 입력한다고 가정하세요. 입력하는 숫자의 제곱이 입력하는 동안 문단에 출력되도록 만드세요.