오늘은 Vue.JS step3. 컴포넌트(component)에 대해 포스팅하려고 합니다.
Vue.JS에서 컴포넌트는 조합하여 화면을 구성할 수 있는 블록을 의미합니다.
HTML Element를 확장하고 재사용 가능한 형태로 구현이 가능하며
Vue.JS에서 사용된 모든 컴포넌트는 하나하나가 인스턴스라고 볼 수 있습니다.
컴포넌트는 일반적으로 전역 컴포넌트와 지역 컴포넌트가 있습니다.
컴포넌트 이름으로 template속성에서 사용할 HTML 태그를 직접 정의하여 사용할 수 있고,
컴포넌트 내용으로 template, data, methods 등의 인스턴스 옵션 속성을 정의하여 사용할 수 있습니다.
1) 전역(Global) 컴포넌트
인스턴스 밖에서 Vue.component() 형태로 등록할 컴포넌트의 이름과 내용을 정의하여 사용합니다.
아래 예제 코드와 같이 app-header, app-footer과 같은 html 태그를 정의하고 컴포넌트를 사용할 수 있습니다.
<!-- component-global.html -->
<!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>'
});
Vue.component('app-footer',{
template : '<h2>footer</h2>'
});
var vm = new Vue({
el:'#app'
});
</script>
</body>
</html>
Visual Studio Code에서 component-global.html를 마우스 우클릭 후 "Open with Live Server"
또는 키보드로 Alt +L + O 실행하면 다음과 같은 브라우저에 결과물이 나타납니다.
개발자 도구(F12)를 통해 Vue tab을 확인해보면 생성한 컴포넌트 html 태그가
Root안에 AppHeader, AppFooter 형태의 파스칼(Pascal Case) 표기법으로 나타난 것을 확인할 수 있습니다.
2) 지역(local) 컴포넌트
전역 컴포넌트와 다르게 인스턴스 안에 components 속성을 추가하고 등록할
컴포넌트의 이름과 내용을 정의하여 사용합니다.
<!-- component-local.html -->
<!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-content></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
// 지역 컴포넌트 등록 방식
// components:{'컴포넌트 이름' : 컴포넌트 내용}
components:{
'app-content':{
template: '<h3>Content</h3>'
}
}
});
</script>
</body>
</html>
Visual Studio Code에서 component-local.html를 마우스 우클릭 후 "Open with Live Server"
또는 키보드로 Alt +L + O 실행하면 다음과 같은 브라우저에 결과물이 나타납니다.
개발자 도구(F12)를 통해 Vue tab을 확인해보면 생성한 컴포넌트 html 태그가
Root안에 AppContent 형태의 파스칼(Pascal Case) 표기법으로 나타난 것을 확인할 수 있습니다.
참조 1) https://kdydesign.github.io/2019/04/27/vue-component/
참조 2) https://velog.io/@sms8377/Javascript-Vue-%EC%97%90%EC%84%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%9E%80
지금까지 Vue.JS step3. 컴포넌트(component)에 대한 포스팅이었습니다.
'Develope > Vue.JS' 카테고리의 다른 글
| [Vue.JS] step 5. 메서드(methods) (0) | 2022.05.10 |
|---|---|
| [Vue.JS] step 4. 데이터 바인딩(data binding) (0) | 2022.05.04 |
| [Vue.JS] step 2. 인스턴스(instance) (0) | 2022.04.30 |
| [Vue.JS] step 1. 시작하기 - 환경설정 (0) | 2022.04.28 |
| [Vue.JS] error defined but never used no-unused-vars 해결방법 (0) | 2022.01.12 |
