[Vue.js] Vue Instance 생성

@notepad_jj2

츄르사려고 코딩하는 코집사입니다.

---

1. Vue Instance 생성

속성	내용
el	vue가 적용될 요소 지정. CSS Selector or HTML Element
data	vue에서 사용되는 정보 저장하는 곳. 객체 또는 함수의 형태
template	화면에 표시할 HTML, CSS 등 마크업 요소를 정의하는 속성. v-if가 있을 때, 태그가 2개 이상이면 template로 묶어준다.
methods	화면 로직 제어와 관련된 method를 정의하는 속성 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직 추가
created	Vue Instance가 생성되자 마자 실행할 로직 정의

 

2. Vue Instance Life Cycle

1) Instance 생성(Created)

2) 생성된 Instance 화면에 부착(Mounted)

3) 화면에 부착된 Instance의 내용 갱신(Updated)

4) Instance가 제거되는 소멸(Destroyed)

 

Life Cycle 속성	내용
beforeCreate	Vue Instance가 생성되고 각 정보의 설정 전에 호출 DOM과 같은 화면요소에 접근 불가
created	Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출 Instance가 화면에 부착하기 전이기 때문에 template 속성에 정의된 DOM 요소는 접근 불가 서버에 데이터를 요청(HTTP 통신)하여 받아오는 로직 수행
beforeMount	마운트가 시작되기 전에 호출
mounted	지정된 element에 vues Instance 데이터가 마운트 된 후에 호출 template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행
beforeUpdate	데이터가 변경될 때 virtual DOM이 랜더링, 패치 되기 전에 호출
updated	vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태. 데이터 변경 후 화면 요소 제어와 관련된 로직 추가
beforeDestroy	Vue Instance가 제거되기 전에 호출
destroyed	Vue Instance가 제거된 후에 호출

https://kr.vuejs.org/v2/guide/instance.html