본문 바로가기
javascript, framework/vue

Step07_component

bono.html 2022. 8. 26. 15:51

 

 

Step07_component

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step07_component.html</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h1>component 정의하고 사용하기</h1>
    <div id="app">
        <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
        <input type="text" v-model="msg"/>
        <your-component v-bind:greet="'안녕하세요!'"></your-component>
        <your-component v-bind:greet="msg"></your-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
            	msg:""
            },
            components:{
                "my-component":{
                    template:"<div class='box'> box </div>"
                },
                "your-component":{
                    template:"<div class='box'>{{greet}}</div>",
                    props:["greet"]
                }
            }
        });
    </script>
</body>
</html>

input에 입력한 텍스트가 5번째 상자에 입력된다.

 

 

Step07_component2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step07_component2.html</title>
</head>
<body>
    <h1>component 사용예제</h1>
    <div id="app">
        <h2>친구 목록 입니다.</h2>
        <friends-component v-bind:friends="friends"></friends-component>
        
        <h2>동물 친구 목록 입니다.</h2>
        <friends-component v-bind:friends="friends2"></friends-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                friends:["김구라","해골","원숭이"],
                friends2:["강아지","고양이","두더지"]
            },
            components:{
                "friends-component":{
                    template:`
                        <ul>
                            <li v-for="item in friends">{{item}}</li>
                        </ul>
                    `,
                    props:["friends"]
                }
            }
        });
    </script>
</body>
</html>

data는 부모 component 로부터 받아서 자식 component로 전달하였다.

`을 사용해서 html양식을 쉽게 작성하였다.

 

 

Step07_component3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step07_component3.html</title>
</head>
<body>
    <h1>component 테스트</h1>
    <div id="app">
        <p> 오늘의 인사 : <strong>{{greet}}</strong></p>
        <my-component></my-component>
    </div>
    <div id="app2">
        <p> 오늘의 인사 : <strong>{{greet}}</strong></p>
        <my-component></my-component>
    </div>
    <div id="app3">
        <p> 오늘의 인사 : <strong>{{greet}}</strong></p>
        <my-component></my-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        /*
            재사용 가능한 컴포넌트를 전역으로 정의하기 
            Vue.component("컴포넌트 이름", {컴포넌트 데이터});
        */
        Vue.component("my-component", {
            template:"<div>{{msg}}</div>",
            data(){
                return {
                    msg:"div 입니다."
                };
            }
        });

        let app=new Vue({
            el:"#app",
            data:{
                greet:"안녕하세요!"
            }
        });
        let app2=new Vue({
            el:"#app2",
            data:function(){
                return {
                    greet:"안녕하세요!"
                };
            }
        });
        let app3=new Vue({
            el:"#app3",
            data(){
                return {
                    greet:"안녕하세요!"
                };
            }
        });
    </script>
</body>
</html>

component 정의하기

/*
    재사용 가능한 컴포넌트를 전역으로 정의하기 
    Vue.component("컴포넌트 이름", {컴포넌트 데이터});
*/
Vue.component("my-component", {
    template:"<div>{{msg}}</div>",
    data(){
        return {
            msg:"div 입니다."
        };
    }
});

component를 정의하는 코드이다.

 

 

함수 표현 코드

let app=new Vue({
    el:"#app",
    data:{
        greet:"안녕하세요!"
    }
});
let app2=new Vue({
    el:"#app2",
    data:function(){
        return {
            greet:"안녕하세요!"
        };
    }
});
let app3=new Vue({
    el:"#app3",
    data(){
        return {
            greet:"안녕하세요!"
        };
    }
});

모양은 다르지만 기능이 같다.

함수를 표현하는 3가지 방법이 있다. 다만 component를 사용할때는 첫번째 app과 같은 형식은 사용할 수 없다.

 

Step07_component4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step07_component4.html</title>
</head>
<body>
    <h1>component 테스트</h1>
    <div id="app">
        <fortune-component v-bind:fortune="'동쪽으로 가면 귀인을 만나요'"></fortune-component>
        <fortune-component v-bind:fortune="fortune"></fortune-component>
        <input type="text" v-model="fortune" >
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        /*
            1. props:["fortune"]

            fortune 이라는 이름의 props 를 받을 준비가 되어 있는 컴포넌트 

            2. props 를 전달하는 방법
            
            <자식컴포넌트명 v-bind:프로퍼티명="값"> 
            <fortune-component v-bind:fortune="fortune">

        */
        Vue.component("fortune-component",{
            template:`
                <div>
                    <h2>오늘의 운세</h2>
                    <p>{{fortune}}</p>    
                </div>  
            `,
            props:["fortune"]
        });

        let app=new Vue({
            el:"#app",
            data(){
                return {
                    fortune:"북쪽으로 가면 규환이를 만나게 될꺼에요!"
                };
            }
        });
    </script>
</body>
</html>

1. props:["fortune"]
fortune 이라는 이름의 props 를 받을 준비가 되어 있는 컴포넌트 


2. props 를 전달하는 방법

<자식컴포넌트명 v-bind:프로퍼티명="값"> 
<fortune-component v-bind:fortune="fortune">

 

 

Step07_component5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step07_component5.html</title>
</head>
<body>
    <h1>component 테스트</h1>
    <div id="app">
        <!-- 
            props 이름이 camel case 로 작성되어 있으면 kebab case 로 props 를 
            전달해야 한다.
        -->
        <fortune-component v-bind:fortune-today="fortune"></fortune-component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        Vue.component("fortune-component",{
            template:`
                <div>
                    <h2>오늘의 운세</h2>
                    <p>{{fortuneToday}}</p>    
                </div>  
            `,
            props:["fortuneToday"]
        });

        let app=new Vue({
            el:"#app",
            data(){
                return {
                    fortune:"북쪽으로 가면 규환이를 만나게 될꺼에요!"
                };
            }
        });
    </script>
</body>
</html>

props 이름이 camel case 로 작성되어 있으면 kebab case 로 props 를 전달해야 한다.

  

 

Step07_example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step07_example.html</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <div class="container" id="app">
        <h1>component 예제</h1>
        <div class="row">
            <figure-component 
                v-for="(item, index) in imageList"
                v-bind:imageinfo="item"
                v-bind:key="index"></figure-component>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component("figure-component",{
            template:`
            <div class="col">
                <figure class="figure">
                    <img v-bind:src="imageinfo.src" class="figure-img img-fluid rounded">
                    <figcaption class="figure-caption">{{imageinfo.caption}}</figcaption>
                </figure>
            </div>
            `,
            props:["imageinfo"]
        });

        let app=new Vue({
            el:"#app",
            data(){
                return {
                    imageList:[
                        {src:"images/image1.png", caption:"어쩌구... 저쩌구..."},
                        {src:"images/image2.png", caption:"어쩌구... 저쩌구..."},
                        {src:"images/image3.png", caption:"어쩌구... 저쩌구..."},
                        {src:"images/image4.png", caption:"어쩌구... 저쩌구..."}
                    ]
                };
            }
        });
    </script>
</body>
</html>

 

v-blind:key 는 없어도 에러가 나지는 않지만 반복문을 돌릴때 여러 요소를 출력하기에 해당 요소를 유일하게 식별할 수 있는 key 값을 전달해주는 것이 좋다.

저작자표시 (새창열림)

'javascript, framework > vue' 카테고리의 다른 글

Step09_ref  (0) 2022.08.26
Step08_eventEmit  (0) 2022.08.26
vue 사용 예시 (signup_form, 회원가입)  (0) 2022.08.26
Step04~06(style, if, for)  (0) 2022.08.26
Step03_class  (0) 2022.08.26

'javascript, framework/vue' Related Articles

티스토리툴바