고정 헤더 영역
상세 컨텐츠
본문
오늘부터 Vue(뷰우, view와 발음이 같다)를 시작해보려 한다.
Vue는 Javascript 프레임워크로써 최근 front-end 개발자들에게 사랑받고 있다.
앞으로 차근차근 배워가며 Vue의 매력속으로 빠져들어가 보자.
Vue.js의 로고다.
모양부터가 간결하다. 깔끔하다.
너란 녀석 설치해보자.
아참! 참고로 Vue는 IE8 이하 버전은 지원하지 않습니다.
IE8 이젠 버릴때도 되었다.
설치하는 방법은 간단하다.
1. scipt 태그 CDN 추가한다.
2. Vue를 즐긴다.
자 아래를 보자.
CDN도 2가지가 존재한다.
1) 개발 버전, 유용한 콘솔 경고 포함한다.
<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
2) 크기 및 속도에 최적화 된 프로덕션 버전,
<script src = "https://cdn.jsdelivr.net/npm/vue" ></script>
참고로 1번 개발버전 CDN을 추천한다.
이유는? 우린 개발자니까..!! 각종 에러에 따른 디버깅을 해야하기 때문이다.
자! 이렇게 추가를 했다면..
여러분은 Vue를 시작할 준비가 되었습니다.
이렇게 간단하게 될줄이야. 역시 매력적이야.
이제 본격적으로 Vue.js 시작해보겠습니다.!!
다들 코딩의 시작은 뭐다?
"Hello, world!"
하지만 Hello, Vue.js 를 출력해 봅시다.
<body>
<div id="app">
<h1>Hello, Vue.js</h1>
</div>
</body>
id값이 "app" 인 div 태그 안에
Hello, Vue.js를 적어줍니다.
그리곤 Vue 인스턴스를 생성!
< script >
new Vue({
el: '#app'
})
</script>
Vue.js가 작동할 위치를 찾기 위해서
el 옵션에 #app 값을 넣어줍니다.
이렇게 되면 #app 이라는 Container 내부에서
Vue에서 제공하는 기능을 모두 사용할 수 있게 되었습니다.
그럼 기본적인 Vue를 활용해서 메시지를 표시해 보겠습니다.
var data = {
message : "Hello, Vue.js"
}
전역 변수로 data를 선언 후
객체 내부에 key와 value 를 넣어줍니다.
이후 #app을 가리키고 있는
Vue의 data 옵션에 전역변수 data를 넣어줍니다.
< script >
new Vue({
el: '#app',
data: data
})
</script>
또는 아래와 같이
Vue의 data 옵션에
객체로 바로 선언해도 되겠습니다.
이러한 방법은 사용자의 편의에 따라 사용하셔도 되겠습니다.
< script >
new Vue({
el: '#app',
data: {
message : "Hello, Vue.js"
}
})
</script>
이제 data 옵션에 있는 message Key 의 value 를 가져와야겠죠?
Vue 에서는 메시지를 표시하기 위해서 중괄호{} 를 사용합니다.
중괄호 안에 중괄호 {{}}
{{message}}
이처럼 가져오고 싶은 value의 Key를
중괄호 안에 넣어주시면 되겠습니다.!!
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
이렇게 되면 화면에 처음과 같은
Hello, Vue.js 가 출력될 것입니다.
Hello, Vue.js
여러분은 Vue를 시작한 이상 쉽게 빠져 나가지 못할것입니다.
여기까지 따라오면서
'이렇게 쉬워도 되는건가?'
라는 생각을 하게될텐데.. 하셔도 됩니다!!
더 자세하게 알고싶은 분들은
https://kr.vuejs.org/v2/guide/index.html
한국어로 번역이 잘 된 Vue 사이트를 활용해 주시기 바랍니다!!
그러면 다음 시간에는 input태그와 연동되는 데이터 바인딩에 대해서 알아보도록 하겠습니다.
댓글 영역