Vue.js - MVVM 패턴

UI 화면 개발 방법

주로 3가지 방법으로 개발이 이루어 지는데 Vue.js에서는 MVVM 패턴을 사용한다. 

이는 화면의 요소들을 제어하는 코드와 데이터 제어로직을 분리하여 관리가 용이하게 하기 위함이다.

이와 관련된 용어는

1. 뷰 : 사용자에게 보여지는 화면

2. DOM : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리

3. DOM 리스너 : DOM의 변경 내역에 대해 즉각적으로 반응하여 특정로직을 수행하는 장치 

> 화면에 태그나 클래스에서 이벤트가 일어나면 반응.

4. 모델 : 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장

5. 데이터 바인딩 : 뷰에서 표시되는 내용과 모델의 데이터를 동기화

> 모델의 데이터와 화면에 표시되는 부분과 연결

6. 뷰 모델 : 뷰와 모델의 중간영역, 돔 리스너와 데이터 바인딜을 제공하는 영역

위와같이 이루어져 있다.