📌 :value
- 기능 : DOM 요소의 value 속성을 설정합니다.
- 단방향 바인딩 :
:value를 사용하면 데이터가 Vue의 상태에서 DOM으로 한 방향으로만 흐릅니다. - ex)
input,select,option등의 태그에서 초기값 설정에 사용됩니다.
[예시]
message값이input의 초기value로 설정input필드의 값을 변경해도message는 업데이트 안됨
<template>
<input :value="message" />
</template>
<script>
export default {
data() {
return {
message: "Hello, Vue!",
};
},
};
</script>📌 v-model
- 기능: 양방향 데이터 바인딩을 제공합니다.
- 양방향 바인딩: DOM 요소와 Vue 상태 간에 데이터가 동기화됩니다.
v-model을 사용한다면 이미input값을 처리해주고 있기 때문에@input이벤트는 따로 사용하지 않아도 된다
(만약 해당 이벤트가 값 업데이트 외에 추가적인 로직이 필요하다면 사용해도 됨)- ex) 사용자가 입력한 값을 Vue 상태에 즉시 반영하고 싶을 때 사용합니다.
[예시]
v-model은:value와@input을 결합한 형태- 초기값을 설정하고 사용자가 값을 변경할 때 vue 데이터도 즉시 업데이트 됨
<template>
<input v-model="message" />
</template>
<script>
export default {
data() {
return {
message: "Hello, Vue!",
};
},
};
</script>🧨 주의할점
v-model사용시:value를 동시에 사용할 필요 x
->v-model자체가:value와@input이벤트를 모두 처리해버리기 때문
[예시]<input v-model="message" :value="anotherValue" />
📍 요약
- 단순히 초기값만 설정하고 싶은 경우
:value를 사용합니다.- Vue 데이터와 DOM을 실시간으로 동기화하고 싶다면
v-model을 사용하세요.
