Vue.js

Vue.js

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

<--ㅁ--> 양방향 라이브러리

데이터 변화를 라이브러리에서 감지해서 화면에 그려줌 --> 반응형 지원

*MVVM - 모델, 뷰, 뷰모델로 이루어진 패펀

*MVC 모델, 뷰, 컨트롤러로 이루어진 패턴

 

*MVVM

MVVM은 뷰모델을 지원하므로 뷰가 필요한 데이터와 커맨드 제공

컴포넌트(블럭 같은 것) 간의 통신이 Vue, Angular는 양방향, React는 단방향

- 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API를 지원하는데에 궁극적인 목적이 있음

- Angular에서 지원하는 양방향 데이터 바인딩을 동일하게 제공

- 다른 프레임워크와 비교했을 때 상대적으로 가볍고 빠름

- 문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구나 쉽게 접근 가능

 

용어	설명
뷰(View)	사용자에게 보이는 화면
돔(DOM)	HTML 문서에 들어가는 요소(태그,클래스,속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너(DOM Listener)	돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
모델(Model)	데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩(Data Binding)	뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델(ViewModel)	뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

[출처] Vue.js 란? 화면단 라이브러리 (프론트엔드 라이브러리) / 사용자 인터페이스를 만드는 프레임워크|작성자 구름

 

Vue 특징

● 키보드 입력 또는 마우스 클릭등과 같은 이벤트발생 시 Dom Listener가 이벤트를 잡아서 자바스크립트의 이벤트를 변경해준다.

● 이벤트가 변경되면 Data Bindings를 이용해서 자바스크립트의 데이터가 변경되어 화면까지 동시에 반영된다. (반응성 - Reactivity)

 

*양방향바인딩

화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽이 변경되면 다른 한쪽도 자동으로 변경

 

*단방향바인딩

상위 컴포넌트에서 하위 컴포넌트로만 데이터가 전달되는 방식 (부모 --> 자식)

 

 

 

 

Vue Instance

new Vue();

 

인스턴스에서 사용할 수 있는 속성과 API

new Vue({ el:, // 인스턴스가 그려지는 화면의 시작점 ( 특정 html 태그 ) template :, // 화면에 표시할 요소 ( html,css등 ) data :, // 뷰의 반응성 Reaactivity가 반영되는 속성 method :, // 화면의 동작과 이벤트 로직을 제어하는 메소드 created :, // 뷰의 라이프사이클과 관련된 속성 watch :, // data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성 ... etc })

 

 

Vue 라이프사이클(생명주기)

 

인스턴스의 상태에 따라서 호출할 수 있는 속성들을 생명주기라고한다. 뷰 인스턴스도 객체이기 때문에 생명주기를 가진다. 속성의 종류로는 8가지가 있다.

beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

 

크게는 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸로 총 4단계로 나뉜다. (Creation-생성, Mounting-장착, Updating-수정, Destrucion-소멸)

 

1. beforeCreate

 

 

 

 

 

 

참고 사이트

https://hyeooona825.tistory.com/40

[vue.js] vue 인스턴스 생명주기 (life cycle)

 

https://joshua1988.github.io/vue-camp/vue/life-cycle.html

Instance Lifecycle | Cracking Vue.js

Jiwon's develop moment