1.1.6 자바스크립트와 Vue 비교

앞의 두 계산기 구현 코드는 많은 부분이 다릅니다. 그림 1-3의 각 샘플은 길벗출판사 깃허브(https://github.com/gilbutITbook/007024)에서 찾아볼 수 있으니 실행해서 어떻게 작동하는지 비교해 보세요.

▲ 그림 1-3 바닐라 자바스크립트(왼쪽)와 Vue(오른쪽)를 사용한 반응형 계산기 비교

 

두 애플리케이션의 가장 큰 차이점은 최종 계산을 업데이트하는 방법과 결과가 자동으로 페이지에 나타나는 방법입니다. Vue 예제를 보면 단일 바인딩인 v-model이 페이지의 모든 업데이트와 계산을 처리합니다. Vue({})를 통해 애플리케이션을 초기화하면 Vue는 자바스크립트 코드와 HTML 마크업을 검사한 후 애플리케이션이 동작할 수 있는 모든 데이터와 이벤트 바인딩을 생성합니다.