뷰 컴포넌트
- 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능.
- 전역 컴포넌트 등록 방식
<body> <div id="app"> <!-- 컴포넌트 내용 반영 --> <app-header></app-header> <app-content></app-content> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // Vue.component('컴포넌트 이름'. '컴포넌트 내용') - 컴포넌트 등록(전역 컴포넌트) Vue.component('app-header',{ template:'<h1>Header</h1>' }); Vue.component('app-content', { template:'<div> content </div>' }); // 인스턴스가 root가 됨 new Vue({ el: '#app' }); </script> </body>
- plugin, library 형태로 전역으로 사용해야 되는 component를 등록하는데 사용
- 한번 등록하면 모든 component에서 사용 가능
- 지역 컴포넌트 등록 방식
<body> <div id="app"> <!-- 컴포넌트 내용 반영 --> <!--<app-header></app-header> <app-content></app-content>--> <app-footer></app-footer> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 인스턴스가 root가 됨 new Vue({ el: '#app', // { } : 객체 리터럴(객체 기호라고 보면됨) // 지역 컴포넌트 등록 방식 components: { // '컴포넌트 이름' : '컴포넌트 내용' 'app-footer': { template: '<footer>footer</footer>' } } }); </script> </body>- 컴포넌트 기반 형식으로 개발시(single file component) 특정 컴포넌트 하단에 어떤 컴포넌트가 있는 components 속성으로 바로 알 수 있음.
- 일반적으로 많이 사용.
- 인스턴스를 생성할 때마다 component를 생성해야됨(등록하지 않은 component 사용시 화면에 표시 X)
배우면서 나아가자