v-bind와 v-model의 간단 차이점

v-bind와 v-model의 차이점

v-bind는 단방향, v-model은 양방향 바인딩.

양방향이면 그저 좋을 거라 무식한 생각을 했지만, 당연하게도 역할에 맞게 써야 한다.

각각의 기능과 역할을 알아보고 쓰임새에 맞게 쓰도록 하자...

 

 

v-bind

v-bind는 데이터를 DOM 요소의 속성에 동적으로 바인딩하는 데 사용된다.

 

<template>
	<input :value="myData">
</template>

export default {
	data() {
		return {
			myData: 'initial value'
		};
	}
};

 

:value는 v-bind:value의 단축 표현이다.

:value는 input 요소의 value 속성을 myData에 동적으로 바인딩한다.

그러나 이것은 양방향 바인딩이 아니기 때문에 사용자의 입력은 myData에 반영되지 않는다.

주로 form 요소에 초기값을 설정할 때 사용된다.

 

 

v-model

v-model 디렉티브는 주로 사용자 입력과 데이터 모델 간의 양방향 바인딩을 구현하는 데 사용된다.

주로 form 요소에 적용되며 해당 요소의 값을 데이터에 바인딩하고, 데이터의 변경은 사용자 입력에 반영된다.

 

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

export default {
	data() {
		return {
			myData: 'initial value'
		};
	}
};

 

v-model은 myData와 input 요소를 양방향으로 바인딩하며, myData가 변경되면 입력 필드에 반영되고, 입력 필드의 변경은 myData에 반영된다.

 

 

차이점

v-model은 양방향 데이터 바인딩을 수행하며, 입력 요소의 값이 변경되면 데이터가 갱신되고, 데이터가 변경되면 입력 요소에 반영된다.

v-bind는 단방향 데이터 바인딩을 수행하며, 데이터를 DOM 요소에 설정하는 역할을 한다.

사용자의 입력은 바인딩된 데이터에 자동으로 반영되지 않는다.

이를 양방향 바인딩으로 만들려면 @input 이벤트와 메소드를 사용해야 한다.