[ VueJS 입문 ] 양방향 데이터 바인딩 v-model / two way binding / VueJS Directive

• VueJs의 꽃, 양방향 데이터 바인딩, v-model

이전까지의 내용은 Vue -> Template의 단방향 데이터 바인딩 이었다면 이제는 Vue ↔ Template의 양방향 데이터 바인딩을 보도록 하겠다. 이를 가능하게 해주는 디렉티브는 v-model이다.

 

• 폼 입력 바인딩

양방향 데이터 바인딩이 자주 사용되는 대표적 예는 폼 입력을 할 수 있는 input태그 이다. Vue 공식 사이트에도 다루고 있다.

https://jsfiddle.net/sunghun/th2m9ws7/36/

샘플을 보면 {{ name }}은 단방향데이터 바인딩으로 Vue인스턴스가 가진 정보만 보여주는 역할 이지만 input 태그의 v-model 디렉티브를 통해 Vue의 data 값을 직접 수정 할 수 있다.