데이터바인딩의 이유

Question

데이터의 return의 객체들을 template에 넣으면 2방향 데이터 바인딩이라는 대단한 것을 할 수 있다고 하였습니다. 그런데 그냥 객체 같다쓴는 것은 굳이 프레임 워크를 쓸필요 없이 자바스크립트 언어를 가지고 누구나 할 수 있는 것 아닌가요? 2방향 데이터 바인딩에 관하여 조금더 상세한 설명 부탁드립니다!!

개발자의 품격 · Answer

양방향 데이터 바인딩은 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을 사용해서 양방향 데이터 바인딩 처리가 가능하기 때문에 이런 코드 작업이 필요 없게 된것입니다.