vue.js 강좌 - 첫번째 앱!!

Vue.js

by somiyuralove 2019. 2. 19. 00:46

안녕하세요.

오늘 시간에는 요즘 뜨고있는 UI 프레임워크 중 하나인 vue.js에 대해서 알아보는 시간을 가져보겠습니다.

앞으로 시간될때마다 vue.js에 대해 열심히(?) 올려보도록 하겠습니다.

vue.js는 다른 프레임워크 ( Angular, React )보다 배우기가 쉽고 MVC 모델에서 View단에 포커스를 맞춘 프레임워크라고 보시면 되겠습니다.

vue.js의 가장큰 장점은 가볍고 빠르며 배우기 쉽다는 것입니다.

그럼 백문이 불여일견이라고 첫번째 프로그램을 만들어 볼까요?

만들기전에 vue.js는 다른 프레임워크와 달리 한글화가 무척 잘되어 있고 앞으로의 강좌도 아래 가이드에서 많이 참고함을 알려드립니다.

https://kr.vuejs.org/v2/guide/index.html

그럼 첫번째 vue.js를 아래와 같이 만들어보도록 하겠습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </body>
</html>

위에 script 태그안에 cdn 방식으로 주소를 추가해주면 일단 vue.js를 사용할 수 있는 환경이 됩니다.

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

위의 소스를 보면

<script>

            var app = new Vue({

                el: '#app',

                data: {

                    message: 'Hellow World. 안녕하세요 Vue!!!'

}

})

</script>

스크립트 태그안에 app로 뷰를 생성해주고 el태크로 아이디를 app로 data태크로 message를 설정해주었습니다.

그리고 <div>태크에서 id를 app으로 설정해주고 메시지를 출력하는 코드인 {{ message }}를 넣었습니다.

브라우저에서 실행해보면 아래와 같이 보입니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="app-2">
            <span v-bind:title="message">
                내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다.
            </span>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app = new Vue({
                el: '#app-2',
                data: {
                    message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
                }
            })
        </script>
    </body>
</html>

위의 코드처럼 v-bind를 사용하여 마우스 오버시 title에 메시지가 나타나게 할 수도 있습니다.

v-if를 사용하여 엘리먼트의 존재 여부를 토글할 수 있습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div id="app-3">
           <p v-if="seen">이제 나를 볼 수 있어요</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script>
            var app3 = new Vue({
                el: '#app-3',
                data: {
                    seen: true
                }
            })
        </script>
    </body>
</html>

브라우져에서 F12를 눌러 개발자 모드에서 콘솔에 app3.seen = false를 입력하면 메시지가 사라지는 것을 볼 수 있습니다.

오늘은 여기까지 할께요.

잠이 오네요.

내일은 서울지방에 눈이 많이 내린다고 하네요.

출근길 조심하시길 바랍니다.

그럼 편안한밤 되세요.^^

'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.20