Vue.js

MVVM 패턴의 ViewModel 레이어에 해당하는 자바스크립트 라이브러리 이다.

MVVM 패턴에 대입하여 Vue.js 살펴보기

View

사용자에게 보여지는 부분이다.

<div id="app">
  <h2></h2>
</div>
ViewModel

View에서 선언한 구조에 대한 객체이자 뷰와 모델을 연결하고 보여줄 정보를 제어하는 부분이다.

let simple = new Vue({
  el : #app,
  data : model
});
Model

모델에 대한 데이터를 담은 객체이다.

let model = {
  message : "hello!"
}

LifeCycle

Vuejs생명주기 각 생명 주기의 단계에서 하는 일을 정리하면 아래와 같다.

  • beforeCreate ~ created : 데이터 및 이벤트 초기화
  • created ~ beforeMount : 뷰 생성
  • mounted ~ updated : 데이터 바인딩, 데이터 변경 주시 및 뷰 업데이트
  • destroyed : 자식 컴포넌트, 이벤트 리스너 해제

Reference

공식 문서

개념잡기

컴포넌트 모음

스타일 가이드

UI Framework & Library

  • https://vuetifyjs.com
  • https://element.eleme.io
  • https://quasar-framework.org

예제모음

Dynamic Components
Template
  • https://github.com/dobromir-hristov/vue-i18n-starter
Vue 적용 사례
Tip