728x90
반응형
뷰 컴포넌트
컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능입니다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있습니다.
인스턴스를 생성하면 기본적으로 Root 컴포넌트가 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"> <!-- 상위 컴포넌트 -->
<app-header></app-header> <!-- 하위 컴포넌트 -->
<app-content></app-content>
<app-footer></app-footer>
</div>
<div id="app2">
<app-header></app-header> <!-- 하위 컴포넌트 -->
<app-footer></app-footer> <!-- 지역 컴포넌트이기 때문에 app2에서는 나타나지 않는다. -->
</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>'
});
new Vue({
el: '#app',
// 지역 컴포넌트 등록 방식
components: {
// '키': '값'
// '컴포넌트 이름': 컴포넌트 내용
'app-footer': {
template: '<footer>footer</footer>'
}
},
methods: {
}
});
new Vue({
el: '#app2',
components: {
'app-footer': {
template: '<footer>footer</footer>'
}
}
});
</script>
</body>
</html>
728x90
반응형
'Vue.js' 카테고리의 다른 글
| Level 1. 개발 환경 설정 (0) | 2020.12.28 |
|---|---|
| Level 1. Vue.js 소개 (0) | 2020.12.28 |
| Level 1. 인스턴스 (0) | 2020.12.28 |
| Level 1. 컴포넌트 통신 방법 - 기본 (0) | 2020.12.28 |
| Level 1. 컴포넌트 통신 방법 - 응용 (0) | 2020.12.28 |
