Vue.js_2일차

써니·2022년 12월 24일

목록 보기

2/15

Vue.js

🔍뷰 라우터

routes

routes: 라우팅 할 URL과 컴포넌트 값 지정
-> 안에 객체로 들어감

<!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>Document</title>
</head>
<body>
    <div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
    <script>
        var LoginComponent = {
            template: '<div>login</div>'
        }

        var MainComponent = {
            template: '<div>main</div>'
        }
        var router = new VueRouter({
            // 페이지의 라우팅 정보
            routes: [
                {
                 // 페이지의 url 이름
                 path: '/login',
                 // 해당 url에서 표시될 컴포넌트
                 component: LoginComponent
                },
                {
                 // url은 main
                 // 컴포넌트 이름은 MainComponet
                 path: '/main',
                 component: MainComponent
                }
            ]
        });
        
        new Vue({
            el: '#app',
            router: router
        })
    </script>
    
</body>
</html>

router-view

url에서 path를 적어주면 해당 컴포넌트안에 담은 내용이 router-view에 담긴다.

<!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>Document</title>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
    <script>
        var LoginComponent = {
            template: '<div>login</div>'
        }

        var MainComponent = {
            template: '<div>main</div>'
        }
        var router = new VueRouter({
            // 페이지의 라우팅 정보
            routes: [
                // 로그인 페이지 정보
                {
                 // 페이지의 url 이름
                 path: '/login',
                 // 해당 url에서 표시될 컴포넌트
                 component: LoginComponent
                },
                // 메인 페이지 정보
                {
                 // url은 main
                 // 컴포넌트 이름은 MainComponet
                 path: '/main',
                 component: MainComponent
                }
            ]
        });
        
        new Vue({
            el: '#app',
            router: router
        })
    </script>
    
</body>
</html>

router-link

a태그와 비슷하다.
한번에 두개를 생성할 때는 router-link*2라고 하면 됨

<!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>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <router-link to="/login">Login</router-link>
            <router-link to="/main">Main</router-link>
        </div>
        <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
    <script>
        var LoginComponent = {
            template: '<div>login</div>'
        }

        var MainComponent = {
            template: '<div>main</div>'
        }
        var router = new VueRouter({
            // 페이지의 라우팅 정보
            routes: [
                // 로그인 페이지 정보
                {
                 // 페이지의 url 이름
                 path: '/login',
                 // 해당 url에서 표시될 컴포넌트
                 component: LoginComponent
                },
                // 메인 페이지 정보
                {
                 // url은 main
                 // 컴포넌트 이름은 MainComponet
                 path: '/main',
                 component: MainComponent
                }
            ]
        });
        
        new Vue({
            el: '#app',
            router: router
        })
    </script>
    
</body>
</html>

라우터 정리

라우터는 페이지를 이동할 때 사용하는 라이브러리

라우터 인스턴스와 뷰 라우터 인스턴스 생성
routes : 페이지의 정보들이 들어가는 인스턴스
-> 한페이지당 뿌려지는 것은 하나이기 때문에 components가 아닌 component
( path -> url / component -> 페이지로 이동했을 때 보이는 것)
mode : URL의 해쉬 값 제거 속성

Axios

뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)입니다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다
axios github

자바스크립트의 비동기 처리 패턴
1. callback
2. promise promise 설명
3. promise + generator
4. async & await

Axios 실습

promise -> 맞으면 then / 아니면 catch
this -> axios 전에 this는 users / axios 호출 후 결과의 this는 다르다

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Axios</title>
</head>

<body>
    <div id="app">
        <button v-on:click="getData">get user</button>
        <div>
            {{ users }}
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                users: []
            },
            methods: {
                getData: function () {
                    var vm = this;
                    console.log(this);
                    axios.get('https://jsonplaceholder.typicode.com/users/')
                        .then(function (response) {
                            console.log(this)
                            console.log(response.data);
                            vm.users = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        })
    </script>
</body>
</html>