Vue.js 시작하기 - Vue.js 소개

VUE란

MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리

MVVM 패턴

MVVM 패턴은 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하여 만든다.
이는 테스트, 유지 보수, 재사용을 쉽게 한다.

MVVM 패턴의 구성요소

• 모델 (Model)
• 뷰 (View)
• 뷰 모델 (View Model)

MVVM 모델에서의 VUE

DOM(View)

브라우저에서 사용자에게 비춰지는 화면을 의미한다.
화면에 나타나는 요소(HTML)는 DOM을 이용해 자바스크립트를 조작하여 구성된다.

VUE(View Model)

중간의 Controller 역할(View와 Model을 연결)을 담당하며, VUE에서는 Vue 객체를 말한다.
VUE의 두가지 특징

• DOM Listeners
  화면에서 사용자가 이벤트를 발생시키면 중간에 뷰에서 DOM Listeners로 받아
  자바스크립트 특정 로직을 실행하게 된다.

• Data Bindings
  자바스크립트 데이터가 바뀌었을 때 Data Bindings를 이용해서 화면에 반영한다.

Plain Javascript Object(Model)

Model은 비지니스 데이터를 담당하며, 일반적으로 json 형태로 데이터를 표현한다.
비지니스 데이터를 관리하다가 값의 변경이 있을 경우 View Model에게 변경사항을 알린다.

*MVVM과 Vue 관련 함께 보면 좋을 블로그 포스팅
MVVM과 Vue.js