Vue.js [1번째정리] 기록 : 뷰 인스턴스

뷰 인스턴스

인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다

#인스턴스 생성

인스턴스는 아래와 같이 생성할 수 있다.

new Vue();

인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔 창에서 확인할 수 있다.

var vm = new Vue(); console.log(vm);

크롬 개발자 도구를 열고 Console 패널을 확인하면 아래와 같은 결과가 나온다.

 

위와 같이 인스턴스를 생성하기 위해선 new Vue 라는 생성자를 호출해야 한다. 생성자란 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로운 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 방법이다.

이처럼 인스턴스 안에는 미리 정의되어 있는 속성과 메서드(API)들이 있기 때문에 이 기능들을 이용하여 빠르게 화면을 개발해나갈 수 있습니다.

#인스턴스의 속성, API들

인스턴스에서 사용할 수 있는 속성과 API는 다음과 같습니다.

new Vue({ el: , template: , data: , methods: , created: , watch: , });

• el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
• template : 화면에 표시할 요소 (HTML, CSS 등)
• data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성
• methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
• created : 뷰의 라이프 사이클과 관련된 속성
• watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

 

# 인스턴스의 유효 범위

Vue 인스턴스는 생성 후 HTML의 범위 내에서만 옵션 속성들이 적용된다. 이를 인스턴스의 유효 범위라 한다. 컴포넌트 설명 부분에서 지역 컴포넌트와 전역 컴포넌트의 차이점을 이해하기 위해서도 꼭 알아야 하는 개념이다, 인스턴스의 유효 범위는 el 속성에 의해 정해진다.

인스턴스가 생성된 후 화면에 적용되는 순서는 아래와 같다.

1. Vue 라이브러리 로딩
2. 인스턴스 객체 생성
3. 특정 화면 element에 인스턴스를 연결
4. 인스턴스의 내용이 element에 적용
5. 적용된 화면이 사용자에게 노출

만약 'Hello Vue.js!' 예제를 아래처럼 수정한다면 

<div id="app">
 
</div>
{{ message }}

{{ message }}

인스턴스 유효 범위를 벗어났기 때문에 message는 출력되지 않는다.

뷰 생성자 함수