1️⃣ vue.js란?
2014년 Evan You가 Angluar의 양방향 데이터 바인딩과 React의 가상 DOM을 반영해 만든 오픈소스 자바스크립트 프레임워크로, 사용자 인터페이스 및 단일페이지 애플리케이션(single page application)을 만드는 데 사용한다.
자바스크립트 프레임워크는 웹 애플리케이션을 만드는데 필요한 데이터 조작과 라우팅 기능, 반응형 애플리케이션을 만드는 기능을 제공하여, 대화형 애플리케이션을 쉽게 만들 수 있게 해준다.
◼ 양방향 데이터 바인딩?
사용자가 데이터를 입력하면 해당 데이터는 데이터 모델에 정의된 데이터 변수에 저장되고, 이 데이터 변수에 변화가 생길때 DOM에도 자동으로 변경사항이 반영되는 것이다. Vue.js에서는 v-model directive를 통해 양방향 데이터 바인딩이 가능하다.
◼ 가상 DOM
DOM (Document Object Model), 즉 문서 객체 모델은 웹페이지에 대한 인터페이스로, HTML, XML과 같은 마크업 언어로 작성된 웹페이지를 웹 브라우저가 사용자가 쉽게 이해할 수 있게 변환하는 과정에서 HTML을 트리 형태의 모델로 저장한 것이다.
웹 애플리케이션의 규모가 커질 수록 DOM을 조작하기가 쉽지 않아진다. 가상 DOM은 'DOM의 복사본'으로 볼 수 있는데, 이 가상 DOM을 사용하여 HTML이나 CSS를 조작하고 적용할 내용만 실제 DOM에 반영한다.
참고 : 예제로 배우는 Vue.js (에이콘, 원철언 지음)