- Vue Instance는 생성과 관련된 data 및 method의 정의가 가능하다.
- method안에서 data를 'this.데이터이름' 으로 접근이 가능하다.
Vue Instance 생성
- el : Vue가 적용될 요소 지정. CSS Selector 이거나 HTML Element
- data : Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태이다
- template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
- methods : 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가
- created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의한다.
Vue Instance의 유효 범위
- Vue Instance를 생성하면 HTML의 특정범위 안에서만 옵션 속성들이 적용된다.
- el 속성과 밀접한 관계가 있다.
인스턴스가 화면에 적용되는 과정
1. Vue Library 파일로딩
2. 인스턴스 객체 생성(옵션 속성 포함)
3. 특정 화면 요소에 인스턴스를 붙임
4. 인스턴스 내용이 화면 요소로 변환
5. 변환된 화면 요소를 사용자가 최종 확인
Vue Instance Life-Cycle
Life Cycle은 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용을 갱신, 인스턴스가 제거되는 소멸의 4단계로 나뉜다.
Life Cycle Hooks
- beforeCreate : Vue Instance가 생성되고 각 정보의 설정 전에 호출. DOM과 같은 화면요소에 접근이 불가
- created : Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출된다. 인스턴스가 화면에 부착하기 전이기 대문에 template 속성에 정의된 DOM 요소는 접근이 불가
서버에 데이터를 요청하여 받아오는 로직을 수행하기에 좋음 - beforeMount : 마운트가 시작되기 전에 호출
- mounted : 지정된 element(요소)에 Vue Instance 데이터가 마운트 된 후에 호출된다. template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행한다.
- beforeUpdate : 데이터가 변경될 때 virtual DOM이 랜더링, 패치 되기 전에 호출된다.
- updated : Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태. 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가
- beforeDestroy : Vue Instance가 제거되기 전에 호출
- destroyed : Vue Instance가 제거된 후에 호출
Vue filter
- 뷰의 필터는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능이 있다.
- filter를 이용하여 표현식에 새로운 결과 형식을 적용
- 중괄호 보간법 [ {{}} ] 또는 v-bind 속성에서 사용이 가능하다.
중괄호 보간법
{{ message | capitalize }}
v-bind 표현
<div v-bind:id="rawId | formatId"></div>
Vue computed
- 특정 데이터의 변경사항을 실시간으로 처리
- 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환한다.
- setter와 getter를 직접 지정할 수 있음
- 작성은 method형태로 작성하나 Vue에서 proxy처리하여 property처럼 사용한다.
Vue watch
- Vue Instance의 특정 property가 변경될 때 실행할 콜백 함수를 설정
- Computed는 종속된 data가 변경되었을 경우 그 data를 다시 계산하여 캐싱
- Watch의 경우 data가 변경되었을 경우 다른 data를 변경하는 작업을한다.
만반잘부