Vue.js - 두번째 강의

Vue.js

by somiyuralove 2019. 2. 20. 22:45

안녕하세요.

오늘 이시간에도 저번시간에 이어 Vue.js의 두번째 강의를 시작해 보도록 하겠습니다.

어제 눈이 좀 많이 내렸고 오늘도 아침에 눈이 좀 오다가 날씨가 많이 풀렸네요.

점점 봄이 다가오려나요?? ^^;;;

추운건 질색이라..ㅎㅎ

그럼 강의를 시작하도록 하겠습니다.

저번시간에 이어 Vue.js의 반복문을 사용하는 방법에 대해서 알아보겠습니다.

아래와 같이 코딩하고 브라우져에서 확인합니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="app-4">
            <ol>
                <li v-for="todo in todos">
                    {{ todo.text }}
                </li>
            </ol>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app4 = new Vue({
                el: '#app-4',
                data: {
                    todos: [
                        { text: '첫번째'},
                        { text: '두번째'},
                        { text: '세번째'}
                    ]
                }
            })
        </script>
    </body>
</html>

아이템이 3개 나왔는데(첫번째, 두번째, 세번째), 왼쪽의 개발자도구의 console에서 app4.todos.push( { text: 'New item' }) 을 입력하면

4번째가 생기는걸 확인할 수 있습니다.

다음으로 v-on 디렉티브에 대해서 알아보겠습니다.

아래와 같이 코딩하고 브라우져에서 확인합니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="app-5">
           <p>{{ message }}</p>
           <button v-on:click="reverseMessage">메시지 뒤집기</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app5 = new Vue({
                el: '#app-5',
                data: {
                    message : "Hello World!!!"
                },
                methods: {
                    reverseMessage: function() {
                        this.message = this.message.split('').reverse().join('')
                    }
                }
            })
        </script>
    </body>
</html>

메시지 뒤집기 버튼을 클릭하면 메시지가 reverse되는 것을 확인하실 수 있습니다.

v-on 디렉티브로 사용자 이벤트 핸드링을 처리할 수 있습니다.

다음으로 v-model 디렉티브에 대해서 알아봅니다.

아래 코드를 입력하고 브라우져에서 실행해봅니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="app-6">
           <p>{{ message }}</p>
           <input v-model="message">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app6 = new Vue({
                el: '#app-6',
                data: {
                    message : "안녕하세요 Vue!"
                },
            })
        </script>
    </body>
</html>

입력창에 가나다라고 입력하면 title에도 가나다로 바뀐 모습을 볼 수 있습니다.
이렇게 양방향으로 바인딩된다는걸 알 수 있습니다.

Vue에서 컴포넌트를 등록하는 방법에 대해서 알아보겠습니다.

컴포넌트는 작은 단위의 컴포넌트로 프로그램을 쪼개서 재사용할 수 있는 단위로 만들어 조합하는 개념이라고 보시면 되는데 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적인 개념입니다.

컴포넌트는 아래와 같이 만들고 사용법도 아래와 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>

        <div id="app-7">
           <ol>
               <todo-item
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id">
               </todo-item>
           </ol>
        </div>

    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <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>
</html>

 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'}
                ]
            },
        })

=> data로 groceryList라는 배열을 사용하였습니다.

<ol>

               <todo-item

                v-for="item in groceryList"

                v-bind:todo="item"

                v-bind:key="item.id">

               </todo-item>

           </ol>

=> 이부분에서 정의한 컴포넌트를 사용하는 코드입니다.

아래는 크롬에서 실행한 모습입니다.

강의 초반에도 말씀드렸지만 제 강의는 기본적으로 vue.js 가이드 문서를 참고하고 있습니다.

( https://kr.vuejs.org/ )

'Vue.js' 카테고리의 다른 글

vue 인스턴스와 옵션들. (0)	2019.08.25
vue.js 개발환경 설정 (0)	2019.08.25
vue.js란 (0)	2019.08.25
props, emit (0)	2019.08.25
vue.js 강좌 - 첫번째 앱!! (0)	2019.02.19