[vue.js] v-model

 

 

1. v-model

v-model 디렉티브는 양방향 데이터 바인딩을 통해 

예를들어 사용자가 입력한 엘레멘트 안의 내용을 벼경할 때 메세지 값을 동적을 변경해준다.

화면을 띄우면

 

 

이렇게 내가 데이터 객체에 message의 속성값으로 적은 문자가 나온다.

이때 내가 input창에 다른것을 입력한다면

h1태그의 메세지도 똑같이 바뀌는 것을 볼 수 있다.

 

 

input창 내용을 지우면 지우는대로 바꾸면 바꾸는 대로 h1태그의 내용도 바뀐다.

 

이것이 양방향 데이터 바인딩이며, 

양방향 데이터 바인딩은 뷰에서 모델의 값을 변경하면 모든 것이 최신으로 유지되는 것을 의미한다.

 

 

 

2. 만약 이것을 jQuery로 한다면?

입력 엘리먼트를 만들고 id 나 class를 지정하여 원하는 엘리먼트 입력값과 일치하도록 변경하는 함수를

호출할것이다. 한눈에 보아도 vue가 훨씬 쉽고 간단해 보인다.