이것저것

[Vue]기본 및 설치 본문

JS 프레임워크/Vue

[Vue]기본 및 설치

곰태태 2020. 5. 21. 17:50
반응형
SMALL

vue

리엑트의 가장큰 특징은 데이터바인딩이다.

데이터바인딩 : state와 component에서 사용될수있게하는것

 

vue는 위의 2가지를 모두 겸비했다.

vue의 설치과정 (react를 사용하지 않았다는 가정)

1. vs code 설치

2. vs code market에서 vetur install

3. vs code의 terminal에서 npm install -g @vue/cli

4. 리엑트가 설치되있는 파일말고 이전 파일에서한다.

    vue create vue01로 설치한다.

5. npm run serve 로 실행해준다.

 

프로젝트 만드는 기본방법

<template>
  <div>
    <h1>호랑이</h1>
  </div>
</template>

<script>

export default {
  
}
</script>

html에 vue 적용시키는 기본 방법

<div>에서 <script>의 App를 가져오는것을
데이터바인딩이라고 한다.

<!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>
    <title>Document</title>
</head>
<body>
    <div id='App'>
        <!-- {{}}를 콧수염괄호라고 한다. -->
        <h1>{{msg}}</h1>
    </div>
    <script>
        new Vue({
            el: '#App',
            data: {
              msg: '호랭이',
            },
        })
    </script>
</body>
</html>

하나의 컴포먼트를 구성하는 화면 = template

<!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>
    <title>Document</title>
</head>
<body>
    <div id="App">
    </div>
    <script>
        new Vue({
            el: "#App",
            
            // 하나의 컴포먼트를 구성하는 화면 = template
            template: '<div><h1>코랑이</h1><h1>호랑이</h1></div>'
        })
    </script>
</body>
</html>

template에 msg 추가

<!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>
    <title>Document</title>
</head>
<body>
    <div id="App">
    </div>
    <script>
        new Vue({
            el: "#App",
            data: {
                msg: '호랑이',
            },
            
            // 하나의 컴포먼트를 구성하는 화면 = template
            template: '<h1>{{msg}}</h1>'
        })
    </script>
</body>
</html>

vue에서 onclick 사용하는 방법

click event 카운팅 적용

<!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>
    <title>Document</title>
</head>
<body>
    <div id="App">
        <button v-on:click={num++}>{{num}}</button>
    </div>
    <script>
        new Vue({
            el: "#App",
            data: {
                num: 0,
            },
            
        })
    </script>
</body>
</html>

v-on:click에 methods의 함수정의한 것을 이용

<!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>
    <title>Document</title>
</head>
<body>
    <div id="App">
        <!-- v-on은 지시어(directive)이다. 종류는 5개정도된다. -->
        <button v-on:click='f1()'>{{num}}</button><br/>
        <button v-on:click='f2()'>{{num}}</button><br/>
        <button v-on:click>{{f3()}}</button>
    </div>
    <script>
        new Vue({
            el: "#App",
            data: {
                num: 0,
            },
            
            methods: {
                f1: function(){
                    console.log(1);
                },

                f2: () => {
                    console.log(2);
                },

                f3: () => {
                    return '고양이';
                },
            },
        })
    </script>
</body>
</html>

v-if를 사용해서 true일때 출력 false일때 출력x

true를 바로넣어서 출력도 가능

<!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>
    <title>Document</title>
</head>
<body>
    <div id="App">
        <!-- flag는 true와 false 값을 정의할때 많이 쓰이는 변수이다. -->
        <h1 v-if='flag1'>호랑이</h1>
        <h1 v-if='flag2'>사자</h1>
        <h1 v-if='true'>거북이</h1>
    </div>
    <script>
        new Vue({
            el: "#App",
            data: {
                flag1: false,
                flag2: true,
            },
            
            methods: {

            },
        })
    </script>
</body>
</html>

v-for를 사용해서 배열 출력하기

<!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>
    <title>Document</title>
</head>
<body>
    <div id="App">
        <ul>
            <li v-for='xxx in items'>{{xxx}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#App",
            data: {
                items: ['호랑이', '코끼리', '독수리'],
            },
            
            methods: {

            },
        })
    </script>
</body>
</html>

Vue인스턴스는 1개이상 만들어서 사용할 수 있다.

<!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>
    <title>Document</title>
</head>
<body>
    <!-- Vue인스턴스는 1개이상 만들어서 사용할 수 있다. -->
    <div id="App1">
        <h1>호랑이</h1>
    </div>

    <div id="App2">
        <h1>사자</h1>
    </div>

    <script>
        new Vue({
            el: "#App1",
            
        })

        new Vue({
            el: "#App2",
            
        })
    </script>
</body>
</html>

components를 사용하기

지역 컴포넌트

<!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>
    <title>Document</title>
</head>
<body>
    <div id="App">
        <h1>호랑이</h1>
        <tiger></tiger>
        <lion></lion>
        <cat></cat>
    </div>
    <script>
        new Vue({
            el: "#App",
            
            components: {
                tiger: {template: '<h1>강아지</h1>',},
                lion: {
                    // \는 문자열을 연결해주는 기능을 한다.
                    template: '\
                        <div>\
                            <h2>독수리</h2>\
                            <h1>사자</h1>\
                        </div>',
                },

                cat: {
                    // '대신 `을 사용하면 \를 사용하지않고 더 깔끔하게 사용할 수 있다.
                    template: 
                        `<div>
                            <h2>새끼고양이</h2>
                            <h1>고양이</h1>
                        <div>`,
                },

            },
        })
        
    </script>
</body>
</html>

 

전역 컴포넌트

<!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>
    <title>Document</title>
</head>
<body>
    <!-- 전역 컴포넌트는 코드의 순서에 영향을 받는다. -->
    <div id="App">
        <tiger></tiger>
        <lion></lion>
    </div>
    <script>
        // 여기는 component에 s가 안들어간다.
        Vue.component('tiger',{
            template: '<h1>호랑이</h1>'
        })

        Vue.component('lion',{
            template: '<h1>사자</h1>'
        })        

        new Vue({
            el: "#App",
            
        })
        
    </script>
</body>
</html>

전역component와 지역components의 사용할때의 차이이다.

전역component는 하나씩 선언 가능하기때문에 s를 붙히지않고

지역components는 여러개 선언 가능하기 때문에 s를 붙힌다.

<!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>
    <title>Document</title>
</head>

<body>
    <div id="App1">
        <tiger></tiger>
        <lion></lion>
    </div>

    <div id="App2">
        <!-- <tiger></tiger> 지역component이기때문에 App1에 있는 것은 사용할 수 없다.-->
        <lion></lion>
    </div>

    <script>
        // 전역component
        Vue.component('lion',{
            template: '<h1>사자</h1>',
        });

        new Vue({
            el: "#App1",
            // 지역components
            components: {
                tiger: {template: '<h1>호랑이</h1>'},
            }
        })

        new Vue({
            el: "#App2",

        })

    </script>
</body>

</html>

전역component에서 data와 methods 사용법이다.

v-on: 대신에 @를 써도된다.

<!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>
    <title>Document</title>
</head>

<body>
    <div id="App">
        <tiger></tiger>

    </div>


    <script>
        // 전역component
        Vue.component('tiger', {
            // v-on: 대신에 @를 써도된다.
            template: '<button @click="f1()">{{num}}</button>',

            data: function () {
                return { num: 0 };
            },

            methods: {
                //this.num++을 사용할때 람다식은 적용이 안된다.
                f1: function () {
                    console.log(2);
                    this.num++;
                },
            },
        });

        new Vue({
            el: "#App",

        });
    </script>
</body>

</html>

 

v-model 사용방법 지시법

<!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>
    <title>Document</title>
</head>

<body>
    <div id="App">
        <input v-model='msg' type='text'/>
    </div>

    <script>
        new Vue({
            el: "#App",
            data: {
                msg: '호랑이',
            },
        });
    </script>
</body>

</html>

 

Vue를 설치한 vue01폴더에서 작업한다.

main.js는 메인이 아니라 App.vue에서 하는 작업이 메인이다.

 

파일만들기

tiger.vue 확장자명은 vue이다.

<template>
  <div>
    
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld', //파일명과 동일
  props: {
    msg: String
  }
}
</script>

<style scoped>

</style>

위의 코드가 기본코드이고 파일명과 동일인 부분만 파일명으로 바꿔주면된다.

 

Tiger.vue

<template>
  <div>
    <h1>호랑이</h1>
    
  </div>
</template>

<script>
export default {
  name: 'Tiger', //파일명과 동일
  props: {
    msg: String
  }
}
</script>

<style scoped>

</style>

 

App.vue

<template>
  <div id="app">
    <Tiger/>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import Tiger from './components/Tiger.vue'  //맨밑의 파일을 import할 파일명으로 수정

export default {
  name: 'App',
  components: {
    // HelloWorld
    Tiger,
  }
}
</script>

<style>

</style>

 

컴포넌트를 vue파일로 사용하게된다.

//Tiger.vue
<template>
  <div>
    <h1>호랑이</h1>
    <input v-model="message"/>
    <h1>{{message}}</h1>
  </div>
</template>

<script>
export default {
  name: 'Tiger', //파일명과 동일
  props: {
    msg: String
  },
  
  data(){
    return{
      message: '독수리',
    }
  },

}
</script>

<style scoped>
  h1 {
    color: blue;
  }
</style>

 

v-bind를 사용해서 name과 age를 출력

<!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>
    <title>Document</title>
</head>
<body>
    <div id="App">
        <!-- <tiger name='호랑이' age=20></tiger> -->
        <!-- v-bind:name은 스페이스를 사용하면안된다. v-bind: name (x) -->
        <!-- <tiger v-bind:name=name v-bind:age=age></tiger> -->
        <!-- 주석잡아둔 값들이 기본값이다. -->
        <!-- -->
        <tiger v-bind:dname=sname v-bind:dage=sage></tiger>
    </div>


    <script>
        Vue.component('tiger',{
            template: `
            <div>
            <h1>{{dname}}</h1>
            <h2>{{dage}}</h2>
            <button @click="f1()">{{dage}}</button>
            </div>`,

            // template: `
            // <div>
            // <h1>{{name}}</h1>
            // <h2>{{age}}</h2>
            // <button @click="f1()">{{age}}</button>
            // </div>`,

            // props: ['name', 'age'],
            props: ['dname', 'dage'],
            
            methods:{
                //this를 붙혀야한다.
                f1: function() {console.log(typeof(this.age))},
                
            },
            
        });

        new Vue({
            el: "#App",
            
            //Vue가 가지고 있는 데이터
            data: {
                sname: '사자',
                sage: 30,
            },

            // data: {
            //     name: '사자',
            //     age: 30,
            // },
        });
    </script>
</body>

</html>

 

v-bind는 생략이 가능하다.

v-bind로 가져오지 않을 때는 age는 string값으로 가져오게되고

v-bind를 사용하면 age는 number값을 가져온다.

<!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>
    <title>Document</title>
</head>
<body>
    <div id="App">
        <!-- <tiger name='호랑이' age=20></tiger> -->
        <!-- v-bind:name은 스페이스를 사용하면안된다. v-bind: name (x) -->
        <!-- <tiger v-bind:name=name v-bind:age=age></tiger> -->
        <!-- 주석잡아둔 값들이 기본값이다. -->
        <!-- v-bind는 글자자체를 생략할 수 있다. (:는 생략하면 안된다.) -->
        <!-- v-bind는 age를 string값이 아닌 number값으로 받을 수 있다. -->

        <tiger :name=name :age=age></tiger>
        <!-- <tiger name='호랑이' age='20'></tiger> -->
        <!-- :age는 typeof 사용할 때 number, age는 string 값을 가진다. -->
    </div>


    <script>
        Vue.component('tiger',{
            template: `
            <div>
            <h1>{{name}}</h1>
            <h2>{{age}}</h2>
            <button @click="f1()">{{age}}</button>
            </div>`,

            props: ['name', 'age'],
            
            methods:{
                //this를 붙혀야한다.
                f1: function() {console.log(typeof(this.age))},
                
            },
            
        });

        new Vue({
            el: "#App",
            
            //Vue가 가지고 있는 데이터
            data: {
                name: '사자',
                age: 30,
            },

        });
    </script>
</body>

</html>

 

computed는 함수를 불러올때 ()를 사용하지 않는다.

<!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>
    <title>Document</title>
</head>

<body>
    <div id="App">
        <h1>{{f1()}}</h1>
        <h1>{{count1}}</h1>
        <button @click="count1++">버튼</button>

        <h1>{{f2}}</h1>
        <h1>{{count2}}</h1>
        <button @click="count2++">버튼2</button>
    </div>


    <script>

        new Vue({
            el: "#App",

            data: {
                count1: 0,
                count2: 0,
            },

            methods: {
                f1: function () {
                    console.log(this.count1);
                },
            },

            //methods와 일단 동격이다.
            computed: {
                f2: function () {
                    console.log(this.count2);
                },
            },
        });
    </script>
</body>

</html>

 

show-me-the-money라는 이벤트를 만들어서 f1과 f2모두 출력을 시킨다.

<!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>
    <title>Document</title>
</head>
<body>
    <div id="App">
        <!-- show-me-the-money라는 이벤트가 발생하면 f2를 콜하세요 -->
        <!-- showMeTheMoney보다는 show-me-the-money로 사용하라고 경고가 뜬다. -->
        <com1 @show-me-the-money='f2()'/>
    </div>


    <script>

        Vue.component('com1',{
            template:`<button @click="f1()">버튼</button>`,

            methods: {
                f1: function(){
                    console.log('f1 call');
                    this.$emit('show-me-the-money')
                }
            }

        });

        new Vue({
            el: "#App",
            
            methods: {
                f2: function(){
                    console.log('f2 call');
                },
                
            },
        });
    </script>
</body>

</html>

 

버튼 4개 1,2,3,4 최종결과값

app가 버튼1출력

app는 bpp를 끌어오는데 bpp가 버튼2를 가지고잇음

bpp가 cpp와 dpp를 안고있다.

cpp에 버튼3 dpp에 버튼4

<!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>
    <title>Document</title>
</head>

<body>
    <div id="App">
        <button @click="f1()">버튼1</button>
        <bpp/>
    </div>


    <script>
        Vue.component('bpp', {
            template: `
            <div>
                <button @click="f2()">버튼2</button><br/>
                <cpp/><br/>
                <dpp/>
            </div>`,

            methods: {
                f2: function(){
                    console.log('bpp버튼');
                }
            }
        })

        Vue.component('cpp', {
            template: '<button @click="f3()">버튼3</button>',

            methods: {
                f3: function(){
                    console.log('cpp버튼');
                }
            }
        })

        Vue.component('dpp', {
            template: '<button @click="f4()">버튼4</button>',

            methods: {
                f4: function(){
                    console.log('dpp버튼');
                }
            }
        })
        new Vue({
            el: "#App",

            methods: {
                f1: function(){
                    console.log('app버튼');
                }
            }
        });
    </script>
</body>

</html>

 

event 객체를 생성하기

<!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>
    <title>Document</title>
</head>

<body>
    <div id="App">
        <com1></com1><br/><br/>
        <com2></com2>

    </div>


    <script>
        Vue.component('com1', {
            template: '<button @click="f1()">버튼1</button>',

            //step3-1
            methods: {
                f1: function(){
                    console.log('f1 call');
                    eventBus.$emit('eb', 100);
                },
            },
        });

        Vue.component('com2', {
            template: '<button>버튼2</button>',

            //step2 log출력확인
            created: function(){
                console.log('f2 call');

                //step3 event를 예약하는것(내가 원하는 함수를 call해라)
                //반드시 람다식을 써야한다.
                eventBus.$on('eb', (value)=>{
                    console.log(value);
                });
            },

        });

        //step1 event 객체생성
        let eventBus = new Vue();
        
        
        new Vue({
            el: "#App",

            
        });
    </script>
</body>

</html>

 

 

event를 사용해서 버튼에 적용시키기

<!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>
    <title>Document</title>
</head>

<body>
    <div id="App">
        <com1></com1><br/><br/>
        <com2></com2>

    </div>


    <script>
        Vue.component('com1', {
            template: '<button @click="f1()">{{num}}</button>',

            data: function(){
                return {num: 100};
            },

            //step3-1
            methods: {
                f1: function(){
                    console.log('f1 call');
                    eventBus.$emit('eb', this.num);
                },
            },

        });

        Vue.component('com2', {
            template: '<button>{{num1}}</button>',

            data: function(){
                return {num1: 0};
            },
            //step2 log출력확인
            created: function(){
                console.log('f2 call');

                //step3 event를 예약하는것(내가 원하는 함수를 call해라)
                //반드시 람다식을 써야한다.
                //function을 사용시 적용되지않는다
                eventBus.$on('eb', (num)=>{
                    console.log(num);
                    this.num1 = num*4;
                });
            },

        });

        //step1 event 객체생성
        let eventBus = new Vue();
        
        
        new Vue({
            el: "#App",

            
        });
    </script>
</body>

</html>

 

 

반응형
LIST

'JS 프레임워크 > Vue' 카테고리의 다른 글

Vue 설치 및 Dynamic, Routing 방식(수정)  (0) 2023.08.10
'JS 프레임워크/Vue' Related Articles more
Comments