728x90
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>
'FrontEnd > Vue 2' 카테고리의 다른 글
| [Vue.js] v-on 디렉티브를 통한 event Handle Methods binding (0) | 2022.09.18 |
|---|---|
| [Vue.js] 데이터 바인딩, 디렉티브 (0) | 2022.09.18 |
| [Vue.js] Axios 라이브러리 (0) | 2022.09.18 |
| [Vue.js] Router 기초 (0) | 2022.09.16 |
| [Vue.js] 같은 레벨의 컴포넌트 간의 데이터 통신 (React의 State 끌어올리기) (0) | 2022.09.15 |
| [Vue.js] 컴포넌트간 통신, Props, Event Emit (0) | 2022.09.15 |
| [Vue.js] 튜토리얼 따라하는데 시작부터 에러 (0) | 2022.09.10 |
| [Vue.js] Vue.js 찍먹을 위한 초기 세팅 (0) | 2022.09.10 |
댓글