[Vue] v-model / v-bind / v-on 차이

딱이·2021년 9월 10일
2

v-bind: 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용
v-on: 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용
v-model: v-bind와 v-on의 조합

HTML 입력 요소의 종류에 따른 v-model 속성

(1) input 태그에는 value / input
(2) checkbox 태그에는 checked / change
(3) select 태그에는 value / change

** v-model의 한계

: IME(한국어, 일본어, 중국어) 입력시 한 글자에 대한 입력이 끝나야지만, data 속성값과 input박스의 텍스트가 동기화됨.
Vue 공식문서에서는 한국어 입력을 다룰 때 v-bind:value와 v-on:input을 직접 연결해서 사용하는 것을 권고.

[참고] 캡틴판교-v-model의 동작 원리와 활용 방법

profile
뚝딱뚝딱 FE

0개의 댓글