인프런 커뮤니티 질문&답변

양방향 데이터 바인딩은 vue의 data()에 정의된 데이터 필드와 HTML 화면 요소를 서로 양방향으로 연결할 수 있다는 것입니다.

만약에 age이란 필드가 정의 되어 있고, 이를 html의 input type=text v-model=age 으로 연결되어 있으면,

코딩을 통해서 자바스크립트에서 age의 값을 변경하면 화면에 있는 input type=text의 값도 자동으로 변경이 일어나고, 반대로 사용자가 input type=text의 값을 직접 변경해도, data()에 정의된 age 값이 바뀌게 됩니다.

일반적인 자바스크립트 코드로 사용자가 입력한 값을 가져오려면,

document.getElementsById("").value 이런식으로 필드 하나하나의 값을 코드로 구현해서 가져와야 했고, 코드를 실행하는 타이밍에만 알 수 있었지만, vue에서는 v-model을 사용해서 양방향 데이터 바인딩 처리가 가능하기 때문에 이런 코드 작업이 필요 없게 된것입니다.