- 사용하기 편하고 반복적으로 사용할 수 있는 플랫폼
- Vue 에 이러한 개념을 적용해보면 프로젝트에서 반복적으로 사용되는 기능 및 플랫폼을 만들어놓고 변수에 저장해서 이를 사용
Component
- 컴포넌트도 템플릿과 비슷한 개념. 템플릿은 뭔가 추상적인 개념이라고 한다면 컴포넌트는 이를 구현할 기술
- Component 사전적 정의 : 구성요소, 부품 Angular 에서 Component 의미
- Component = Template + Class (Properties와 Method를 포함할 수 있음) + Meta Data
- Template : View layout, HTML 형태로 작성되어있다 Binding 과 Directive(지시자)를 포함한다.
- Class : Code supporting the view, Properties(data) 와 Method(logic) 를 포함한다. 타입스크립트 형태로 작성되어있다.
- Meta Data : Angular에 대한 추가 데이터, Decorator 로 정의되어있다. 모듈(Module)의 사전적 정의 : 하나로 일괄되어 다른 프로그램으로도 재이용(reusable)할 수 있는 형으로 되어있는 것
- 컴포넌트 생성 방법 1
ex)
<div id="app">
<!-- 컴포넌트 -->
<my-component></my-component>
</div>
<script>
// 컴포넌트 생성
Vue.component('my-component',{
template : "<div> Hello Component </div>"
});
var Vue = new Vue({
el : "#app",
})
</script>
- 컴포넌트 생성 방법 2 ex)
<div id="app">
<!-- 컴포넌트 -->
<your-component></your-component>
</div>
<script>
// 컴포넌트 생성 추가
var yours = {
template : "<div>It is yours</div>"
}
var Vue = new Vue({
el : "#app",
components : {
'your-component' : yours // 컴포넌트 추가
}
})
</script>
- <my-component></my-component>
를 여러개 쓰면 Hello Component 라는 div 박스가 여러개 생성됨