Skip to main content

[VueJS] 참고 사이트 모음

· 3 min read

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​

예제모음​

Dynamic Components​
Template​
Vue 적용 사례​
Tip​