1. 화면을 개발하기 위한 필수단위, 인스턴스와 컴포넌트

Vue 인스턴스

 

# Vue 인스턴스 : Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위

new Vue({
  ...
})

이 인스턴스를 활용해보자

// 인스턴스
new Vue({
  el: '#app', // el 속성
  data: { // data 속성
    message: 'Hello Vue.js'
  }
})

일단 화면을 개발하기 위해 new Vue를 이용하여 인스턴스를 생성하였다.

그리고 el 속성으로 Vue 인스턴스가 그려질 지점을 지정하고, data 속성에는 message 값을 정의하여 화면에 출력​​해줄 것이다.

​

# Vue 인스턴스 생성자

new Vue() 로 인스턴스를 생성할 때 Vue를 생성자라고 한다. (이때 Vue 생성자는 Vue 라이브러리를 로딩해야 접근할 수 있다.)

생성자를 사용하는 이유는 Vue로 개발을 할 때 필요한 기능들을 생성자에 미리 정의해놓고

사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서이다.

​

※ 생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해놓고 새로 객체를 생성할 때 기존에 포함된 기능과 더불러 기존 기능을 쉽게 확장하여 사용하는 기법.

​

# Vue 인스턴스 옵션 생성

인스턴스를 생성할 때 재정의할 data, el, template ... 등의 속성을 의미한다.

 

속성명	설명
el	Vue 인스턴스가 그려지는 시작점
data	화면에 출력할 값
template	화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성 Vue의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
methods	화면 로직 제어와 관계된 메서드를 정의하는 속성
created	Vue 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성

 

※ CSS 선택자

# : 해당 id를 가진 DOM 요소를 검색할 때

. : 해당 class를 가진 DOM 요소를 검색할 때

​

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

​

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

→ 2. 인스턴스 객체 생성 (옵션 속성 포함)

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

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

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

​

# 인스턴스의 유효범위 : el 속성으로 지정한 <div id="app"> 태그 아래에 오는 요소들로 제한된다.

 

Vue 인스턴스의 라이프사이클

 

# 라이프사이클 속성 : 인스턴스의 상태에 따라 호출할 수 있는 속성

# 라이프사이클 훅(hook) : 각 라이프사이클 속성에서 실행되는 커스텀 로직

 

출처 : https://dahye-jeong.gitbook.io/vue-js/vuejs/2019-10-15-instance

 

(1) 인스턴스 생성

(2) 생성된 인스턴스를 화면에 부착

(3) 화면에 부착된 인스턴스의 내용이 갱신

(4) 인스턴스 소멸

 

Vue 컴포넌트 (전역 컴포넌트와 지역 컴포넌트)

 

# 컴포넌트 : 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)

​

# 컴포넌트 등록하는 방법

(1) 전역 (Global) 컴포넌트 : 여러 인스턴스에서 공통으로 사용할 수 있으며, 뷰로 접근 가능한 모든 범위에서 사용 가능

(2) 지역 (Local) 컴포넌트 : 특정 인스턴스에서만 유효한 범위를 갖고, 특정 범위 내에서만 사용 가능

​

# 전역 컴포넌트 등록 : Vue 생성자에서 .component() 를 호출하여 수행

 

Vue.component('컴포넌트 이름', {
  // 컴포넌트 내용
  template: '<div>전역 컴포넌트가 등록되었습니다.</div>'
});

- 컴포넌트 이름 : template 속성에서 사용할 HTML 사용자 정의 태그

- 컴포넌트 내용 : 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 작성 ex) template, data, methods

​

# 전역 컴포넌트가 화면에 나타나기까지의 처리 과정

(1) 뷰 라이브러리 파일 로딩

(2) 뷰 생성자로 컴포넌트 등록 Vue.component()

(3) 인스턴스 객체 생성 (옵션 속성 포함)

(4) 특정 화면 요소에 인스턴스 부착

(5) 인스턴스 내용 변환 (등록된 컴포넌트 내용도 변환) → <my-component> 가 <div> 로 변환

(6) 변환된 화면 요소를 사용자가 최종 확인

​

# 지역 컴포넌트 등록 : 인스턴스에 components 속성을 추가. 등록할 컴포넌트 이름과 내용을 정의

new Vue ({
  components: {
    '컴포넌트 이름': '컴포넌트 내용'
  }
});

지역 컴포넌트의 생성 예시는 아래와 같다.

<script>
  var cmp = {
    // 컴포넌트 내용
    template: '<div>지역 컴포넌트가 등록되었습니다.</div>'
  };

  new Vue({
    el: '#app',
    components: {
      'my-local-component': cmp
    }
  });