Vue Instance

var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})

· el: Vue가 적용될 요소 지정

· data: Vue에서 사용되는 정보 저장. 객체 or 함수

· template: 화면에 표시할 마크업 요소 정의

· methods: 화면 로직 제어와 관련된 method 정의

· created: 뷰 인스턴스가 생성되자마자 실행할 로직 정의

 

유효범위

- HTML의 특정 범위 안에서만 옵션 속성들이 적용

※ 인스턴스가 화면에 적용되는 과정

1. 뷰 라이브러리 파일 로딩

2. 인스턴스 객체 생성

3. 특정 화면 요소에 인스턴스를 붙임

4. 인스턴스 내용이 화면 요소로 변환

5. 변환된 화면 요소를 사용자가 최종 확인

 

Life Cycle Hoocks

· created

- Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출

- Instance가 화면에 부착되기 전이기 때문에 template 속성에 정의된 DOM 요소는 접근 불가

- 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋음

· mounted

- 지정된 el에 Vue Instance가 마운트 된 후 호출

- template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행

· updated

- Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태

- 데이터 변경 후 화면 요소 제어와 관련된 로직 추가