Vue 인스턴스

new Vue()를 통해 Vue 인스턴스를 생성하고, 해당 인스턴스를 통해 이미 정의되어있는 Vue의 기능들을 사용할 수 있다.
Vue 생성자 함수의 인자로 객체가 들어가는데, 해당 객체에 컴포넌트들을 정의할 수 있다. (지역 컴포넌트)
해당 객체가 아닌 script태그 내에 Vue.component() 방식을 통해 컴포넌트를 정의 할 수도 있다. (전역 컴포넌트)
우리가 생각하는 웹앱 내의 컴포넌트들은 보통 지역 컴포넌트로 선언하고, 플러그인 등은 전역 컴포넌트로 선언한다.

지역 vs 전역

Vue인스턴스를 2개 이상 생성할 수 있는데, 이 때 전역컴포넌트는 어디서든 사용할 수 있지만 지역 컴포넌트는 Vue 인스턴스가 지정한 el 내에서만 사용가능하다. (웹 앱에서 일반적으론 인스턴스 하나로 관리)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <app-header></app-header>
      <app-footer></app-footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 전역 컴포넌트 등록 방식
      // Vue.component('컴포넌트 이름', 컴포넌트 내용);
      Vue.component('app-header', {
        template: '<h1>Header</h1>',
      });
      new Vue({
        el: '#app',

        // 지역컴포넌트 등록 방식
        components: {
          // '컴포넌트 이름': 컴포넌트 내용,
          'app-footer': {
            template: '<footer>footer</footer>',
          },
        },
      });
    </script>
  </body>
</html>

저작자표시