[Vue.js] Vue.js 시작하기 - 4 [ 컴포넌트를 사용한 작성방법 ]
리트리버J
·2020. 12. 29. 16:00
728x90
1. 컴포넌트 생성하기
Vue.component('태그이름',{
template : '태그 작성'
} )
으로 컴포넌트를 생성 할 수 있다.
html태그에서
<태그이름></태그이름>
만으로 깔끔한 코드 작성이 가능하다.
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div id="app">
<ol>
<!-- todo-item 컴포넌트의 인스턴스 만들기 -->
<todo-item></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
template: '<li>할일 항목 하나입니다.</li>'
})
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
|
cs |
1-1. 하지만 무언가 부족하다.
그냥 html태그를 작성하는 것과 사실 그닥 다르지 않다고 느낀다.
Vue인스턴스(부모데이터)로부터 component로 데이터를 주고 받아보자.
1. Vue.component를 이용해서 <todo-item> 태그를 만들었다.
2. Vue 인스턴스의 data속성의 groceryList 객체 배열을 생성한다.
3. 생성한 객체 배열을 component안에서 이용 할 수 있도록 Vue.component 안에 props 속성에 ['todo']로 정의한다.
4. v-for 반복문을 통하여 groceryList의 값 하나하나를 item에 담는다.
5. v-bind:todo 를 통하여 todo에 item을 담는다.
6. v-bind:key 를 통하여 item의 id ( 0, 1, 2)를 key에 담는다.
7. Vue.component의 template 안의 todo.text를 이용하여 key값의 value값을 불러온다.
|
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
44
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div id="app-7">
<ol>
<!--
이제 각 todo-item 에 todo 객체를 제공합니다.
화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다.
또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨).
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
</script>
</body>
</html>
|
cs |
728x90
'Vue.js' 카테고리의 다른 글
| [Vue.js] Vue.js 시작하기 - 3 [ 사용자 입력 핸들링 ] (0) | 2020.12.29 |
|---|---|
| [Vue.js] Vue.js 시작하기 - 2 [ 조건문과 반복문 ] (0) | 2020.12.29 |
| [Vue.js] Vue.js 시작하기 - 1 [ 선언적 렌더링 ] (0) | 2020.12.27 |
| [Vue.js]Vue Cli를 이용하여 Vue.js 설치하기 (0) | 2020.12.21 |
