Vue.js - 기본 컴포넌트 작성방법
① Vue.js에서 컴포넌트(Component)는 정말 중요한 개념이다.
② 타 언어의 컴포넌트 개념과 거의 비슷하며 아래와 같다.
- 재사용 가능한 응용프로그램을 구축가능하게 하는 추상적 개념
- 거의 존재하는 모든 응용프로그램은 컴포넌트 트리로 추상화 가능하다.
③ 미리 정의된 옵션을 가지고 있는 Vue.js의 인스턴스(instance)라고 이해하자.
컴포넌트(Component) 개념 사진
Vue.js 기초문법6 - 컴포넌트 작성 실습
기본 설명 및 소스코드
- 아래 todo-item 태그 참조
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Component Example</title> </head> <body> <div id="app_comp"> <h1>Vue.js - 컴포넌트 기본 실습</h1> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div> <script src="https://unpkg.com/vue"></script> <script> //컴포넌트 정의 //props를 통해 부모 컴포넌트에서 데이터 Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app_comp = new Vue({ el: '#app_comp', data: { groceryList: [ { id: 0, text: '삼겹살' }, { id: 1, text: '돼지갈비' }, { id: 2, text: '오리호박찜' }, { id: 2, text: '뚝배기소고기' } ] } }) </script> </body> </html> | cs |
vue_basic3_example.zip 다음 포스팅에서는 Vue.js 인스턴스(instance) 기본 개념 및 watch(감시자) 에 대해 알아 보자.
참조 : https://www.vuejs.org/v2/guide/index.html
참조 : https://www.vuejs.org/v2/guide/index.html
'웹 프론트 > Vue' 카테고리의 다른 글
| Vue.js - 기초 문법 배우기(5) 강의 및 예제 소스 - 라이프사이클(LifeCycle) (1) | 2017.11.29 |
|---|---|
| Vue.js - 기초 문법 배우기(4) 강의 및 예제 소스 - watch(감시자) (0) | 2017.11.27 |
| Vue.js - 기초 문법 배우기(2) 강의 및 예제 소스 (2) | 2017.10.01 |
| Vue.js - 기초 문법 배우기(1) 강의 및 예제 소스 (0) | 2017.09.30 |
| Vue.js - 기초 설치 방법 및 Ajax (Fetch) 통신 기본 예제 (1) | 2017.09.29 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}