Vue.js 화면을 개발하기 위한 필수 단위 두번째 컴포넌트
- 라이브러리/Vue.js
- 2019. 4. 7. 18:21
컴포넌트는 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미한다. 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있다. 또한, 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 다시 코드를 사용하기가 편하다.
컴포넌트를 등록하는 방법으로는 전역, 지역 컴포넌트가 있다.
전역 컴포넌트 등록 방법
Vue.component('컴포넌트 이름',{
//컴포넌트 내용
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Component Registration</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-component></my-component> <- 컴포넌트 표시
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
<!--전역 컴포넌트 등록-->
Vue.component('my-component',{
template:'<div>전역 컴포넌트가 등록되었습니다.</div>'
});
<!--인스턴스 시작-->
new Vue({
el:'#app'
});
</script>
</body>
</html>위 코드를 보면 버튼표시 아래부분에 전역 컴포넌트가 등록되었습니다. 라는 텍스트가 있을 것이다.
지역 컴포넌트 등록 방법
new Vue({
Components:{
'컴포넌트 이름': 컴포넌트 내용
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Component Registration</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var cmp = {
template:'<div>지역 컴포넌트가 등록되었습니다.</div>'
};
new Vue({
el:'#app',
components:{
'my-component':cmp
}
});
</script>
</body>
</html>
