-뷰 공식문서 : https://vuejs.org/v2/guide/
-뷰 스타일가이드: https://vuejs.org/v2/style-guide/
-뷰 쿡북 : https://vuejs.org/v2/cookbook/
1.Vue.js 란
MVVM 패턴의 뷰 모델 레이어에 해당하는 화면단 라이브러리
바뀐 데이터를 DOM에 다시 대입해줘야지만 화면에 변경점이 적용되는것이 일반적인 웹개발방식 이었다면..
→ 데이터의 변화를 라이브러리에서 감지해서 화면에 그려주는 반응형을 지원하는 라이브러리가 바로 Vue.js 이다.
MVVM은 모델,뷰,뷰모델로 이루어진 패턴이며, 가장 잘 알려진 MVC는 모델,뷰,컨트롤러로 이루어진 패턴이다.
MVVM는 뷰모델을 지원함으로서 뷰가 필요한 데이터와 커맨드를 제공해준다.
뷰모델이란 뷰를 위한 모델이란 뜻으로 뷰는 뷰모델에 대해서만 알고 있으면 되고 그 외의 아키텍처에 대해서는 신경쓰지 않아도 된다.
(비즈니스 로직에서는 ViewModel의 상태 데이터만 변경하면 즉시 View에 반영된다)
(MVC에서의 뷰와 컨트롤러의 관계를 끊을 수 있으며 데이터바인딩으로 뷰모델에서의 속성이 변경되면 뷰에 바로 반영이 될 수 있다.)
2.Vue 특징
- 키보드 입력 또는 마우스 클릭등과 같은 이벤트발생 시 Dom Listener가 이벤트를 잡아서 자바스크립트의 이벤트를 변경해준다.
- 이벤트가 변경되면 Data Bindings를 이용해서 자바스크립트의 데이터가 변경되어 화면까지 동시에 반영된다. (반응성 - Reactivity)
3. Vue 장점
- 학습곡선이 낮다.
- Vue는 컴포넌트기반의 프레임워크다. DOM을 작은 단위로 쪼개어 개발하는 방식(최신개발동향)으로 유지보수와 재사용성이 높다.
- MVVM 패턴으로 기존 jQuery를 통한 DOM 조작이 더이상 필요하지 않다.
- Angular의 장점인 양방향 데이터 바인딩과 React 장점인 가상돔 기반 렌더링 특징을 모두 가진다.
양방향바인딩이란?
-화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것
단방향바인딩이란?
-상위컴포넌트에서 하위컴포넌트로 데이터가 전달되는 방식
4. 뷰인스턴스
인스턴스는 다음과 같이 생성할 수 있다.
|
new Vue(); |
인스턴스에서 사용할 수 있는 속성과 API는 다음과 같다.
|
new Vue({ el:, // 인스턴스가 그려지는 화면의 시작점 ( 특정 html 태그 ) template :, // 화면에 표시할 요소 ( html,css등 ) date :, // 뷰의 반응성 Reaactivity가 반영되는 속성 method :, // 화면의 동작과 이벤트 로직을 제어하는 메소드 created :, // 뷰의 라이프사이클과 관련된 속성 watch :, // data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성 ... etc }) |
5. 뷰컴포넌트
5.1 컴포넌트 등록 방법
뷰에 컴포넌트를 등록하는 방법은 전역과 지역 두가지가 있다.
전역컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있지만, 지역컴포넌트는 특정 인스턴스내에서만 유효한 범위를 갖는다.
5.2 전역컴포넌트
전역컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다.
전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue 생성자에서 .component()를 호출하여 수행한다.
|
Vue.component('컴포넌트명',{( //컴포넌트내용 ( template, data, methods 등 인스턴스 옵션 속성을 정의 ) }); |
5.3 지역컴포넌트
인스턴스에 components 속성을 추가하여 등록한다.
|
new Vue({ components : { } }) |
5.4 전역컴포넌트와 지역컴포넌트 사용예제
|
<html> <head> <title>Vue Sample</title> </head> <body> <div id="app"> <button>컴포넌트 등록</button> <my-component></my-component> <my-local-component></my-local-component> </div> <hr> <div id="app2"> <button>컴포넌트2 등록</button> <my-component></my-component> <my-local-component></my-local-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> Vue.component('my-component',{ template: '<div>전역 컴포넌트가 등록되었습니다 !</div>' });
var cmp = { template: '<div>지역 컴포넌트가 등록되었습니다 !</div>' }
new Vue({ el:'#app', components:{ 'my-local-component': cmp } });
new Vue({ el: '#app2' }) </script> </body> </html> |
6. 뷰의 라이프사이클
6-1. 뷰 인스턴스 라이프 사이클이란?
인스턴스의 사태에 따라 호출할 수 있는 속성
인스턴스의 생성, 변경, 소멸과 관련되어 총 8개가 있다.
6-2. 라이프사이클 훅이란?
각 라이프 사이클 속성에서 실행되는 커스텀 로직
상단의 이미지는 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름을 나타낸 뷰 인스턴스 라이프 사이클 다이어그램이다.
라이프사이클은 크게 4단계로 나뉜다
1. 인스턴스의 생성
2. 생성된 인스턴스를 화면에 부착
3. 화면에 부착된 인스턴스의 내용이 갱신
4. 인스턴스가 제거되는 소멸
|
메소드 |
설명 |
|
beforeCreate |
· 인스턴스가 생성되고 나서 가장 처음 실행되는 라이프 사이클. · data, method 속성이 아직 인스턴스에 정의되어 있지 않다. · DOM과 같은 화면 요소에도 접근 불가하다. |
|
created |
· data, method 속성이 인스턴스에 정의되어 있다. · 정의된 값에 접근하여 로직을 실행할 수 있다. · 다만, 화면에 부착 전이라 template 속성에 정의된 DOM 요소로 접근 불가하다. · 서버에 데이터를 요청해 받아오는 로직을 수행하기 좋다. |
|
beforeMount |
· template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후, · render() 함수가 호출되기 직전의 로직을 추가하기 좋다. |
|
mounted |
· el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계 · template 속성에 정의한 화면 요소(DOM)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계 |
|
beforeUpdate |
· 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계 · 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다. |
|
updated |
· 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계 · 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계 |
|
beforeDestroy |
· 뷰 인스턴스가 파괴되기 직전에 호출되는 단계 · 아직 인스턴스에 접근할 수 있어서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다. |
|
destroyed |
· 뷰 인스턴스가 파괴되고 나서 호출되는 단계 |
'Web > Vue' 카테고리의 다른 글
| Vue.js개념 총정리(5)_vue실행도구,cli설치 (0) | 2021.02.02 |
|---|---|
| Vue.js개념 총정리(4)_템플릿문법,데이터바인딩,데이터변화감지 (0) | 2021.02.01 |
| Vue.js개념 총정리(3)_router(페이지이동),axios(http통신) (0) | 2021.01.31 |
| Vue.js 개념 총정리(2)_컴포넌트 통신규칙 (1) | 2021.01.30 |
| Vue.js 입문 공부(1) /view정의,장점,예제 등 (0) | 2019.01.24 |
