Vue.js 공부 기록(5) - 데이터 양방향 바인딩(Data-two way Binding), v-model

🔍데이터 양방향 바인딩

지금까지는 뷰 인스턴스의 data 객체가 가지고 있는 정보를 HTML 코드 내로 바인딩하여 값을 확인했다.

=> 단방향 데이터 바인딩

두 방향 모두 데이터에 접근할 수 있도록 하는 것을 양방향 데이터 바인딩이라고 한다.

🔍폼 입력 바인딩

• 양방향 데이터 바인딩이 자주 사용되는 대표적인 예.
• v-model
• v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성함. 입력 유형에 따라 엘리먼트를 업데이트하는 올바른 방법으로 자동 선택함.
• v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송함.

🔍예제

텍스트박스에 입력하는 글자가 실시간으로 보여지도록 하고 싶을 때, 양방향 데이터 바인딩을 사용할 수 있다.

v-model 미사용 / v-model 사용