Template
- 사용하기 편하고 반복적으로 사용할 수 있는 플랫폼
- 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>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 박스가 여러개 생성됨
