-
[Vue ] Level1 - 1. 인스턴스 및 컴포넌트Vue 2021. 12. 14. 12:26
인스턴스
1. var vm = new Vue(); 를 사용하는 이유
: 생성자 함수로 api나 속성들을 정의해놓고 가져다가 씀. 기본적으로 root컴포넌트가 됨.
2. 인스턴스에서 사용할 수 있는 속성 및 api
new Vue({ el:, template:, data:, methods:, created:, watch:, });컴포넌트
회면의 영역을 구분하여 개발하는 뷰의 기능. 재사용성이 핵심.
1. 전역 컴포넌트 (플러그인이나 라이브러리 형태로 사용해야 하는 컴포넌트만 전역으로 사용)
<body> <div id="app"> <app-header></app-header> </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' }); </script> </body>2. 지역 컴포넌트
<body> <div id="app"> ... <app-footer></app-footer> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> ... new Vue({ el: '#app', // 지역컴포넌트 등록 '컴포넌트 이름': 컴포넌트 내용 components:{ 'app-footer': { template: '<footer>footer</footer>' } } }); </script> </body>컴포넌트와 인스턴스의 관계
전역컴포넌트는 인스턴스를 생성할 때 따로 등록할 필요 없음. 기본적으로 모든 인스턴스에 등록됨. 하지만 지역컴포넌트는 인스턴스 생성할 때마다 components 로 따로 등록해줘야 함.
'Vue' 카테고리의 다른 글
[Vue] Level1 - computed와 watch (0) 2021.12.16 [Vue] Level1 - 5. Vue-cli (0) 2021.12.16 [Vue] Level1 - 4. 템플릿 문법 (0) 2021.12.15 [Vue] Level1 - 3. 라우터 (0) 2021.12.14 [Vue] Level1 - 2. 컴포넌트 통신 (0) 2021.12.14