본문으로 바로가기

[Vue.js] Component

category Helloworld!/Vue.js 2017.11.15 11:43
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>
- 컴포넌트 생성 방법 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 박스가 여러개 생성됨 
 

참고사이트 : https://velopert.com/3136



댓글을 달아 주세요