Vue.js MVVM 디자인 패턴이란?

MVVM = Model View ViewModel의 약자입니다.

Vue.js 에서는 이 패턴을 사용하고 있음을 아래의 사진으로 알 수 있습니다.

사진의 ViewModel이 양방향 데이터 바인딩을 가능하게 해줍니다.

(출처 : https://012.vuejs.org/images/mvvm.png )

---

M(모델) : 프로그램에서 실제 사용하는 데이터를 다루는 부분. 

V(뷰) : 사용자에게 데이터를 보여주는, 사용자가 눈으로 볼 수 있는 부분.

VM(뷰모델):  View와 Model 사이의 인터페이스 역할, 모델의 데이터를 뷰에 바인딩하고, 뷰에 보여질 동작들을 제어한다.

---

var vm = new Vue ({  }) // Vue instance Create

이렇게 생성된 Vue instance는 VM이 됩니다. $el 은 MVVM 에서 View로 볼 수 있고, $data는 MVVM에서 Model로 볼 수 있습니다.

Model 을 변경하면, View가 업데이트 됩니다. 양방향 바인딩의 경우 View에서 사용자가 입력하면 Model이 업데이트 됩니다.