[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