지난번 포스팅 에서는 Vue.js 설치방법을 알아봤습니다. 오늘도 cdn방식 설치가 되었다 가정하고 설명을 진행하겠습니다. 새로운 언어, 라이브러리, 프레임워크의 빠른 시작법을 알고 싶을 땐 공식문서가 최고입니다.
Vue.js 한글공식문서 를 참고하여 작성했습니다. 이 포스팅은 Vue.js를 처음 시작하시고 javascript를 좀 아시는 분에게 Vue.js 인사이트를 맛보는게 도움이 될 것입니다.
선언적 렌더링
Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다.
여기서 템플릿 구문은 {{ 변수명 }} 을 의미합니다. Django 프레임워크의 템플릿과 의미가 상당히 유사합니다.(Django는 파이썬 웹개발 프레임워크)
1
2
3
<div id="app">
{{ message }}
</div>
1
2
3
4
5
6
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
반면, 데이터를 선언적으로 렌더링한다는 말이 와닿지 않습니다. 만약 자바스크립트로 구현하려면 어떻게 해야 할까요?
1
2
3
4
5
let setMessage = function(){
let divElement = document.querySelector('#app')
divElement.innerHTML = '안녕하세요 Vue!'
}
setMessage()
우선 id 값을 app으로 갖는 DOM을 찾아야 합니다. 그리고 그 내부의 innerHTML를 바꿔줍니다. 이 방법을 택했을 때 불편한 점은 무엇이 있을까요?
- DOM 내부 처리에 신경을 써야한다.
- innerHTML로 데이터를 변경하면 원하는 요소만 변경하기 어렵다.
엘리먼트의 속성도 물론 동적으로 변수와 바인딩 할 수 있습니다.
1
2
3
4
5
<div id="app-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
</span>
</div>
1
2
3
4
5
6
var app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})
이를 자바스크립트 코드로 구현하면 다음과 같습니다.
1
2
3
4
5
let setAttribute = function(){
let spanElement = document.querySelector('#app-2 span')
spanElement.setAttribute("title", '이 페이지는' + new Date() + ' 에 로드 되었습니다')
}
setAttribute()
조건문 반복문
조건문이 쓰이는 가장 기본적인 곳은 로그인, 로그아웃 버튼입니다. 사용자가 로그인 된 상태라면 로그아웃 버튼을 보여줍니다. 로그아웃 상태라면 로그인 버튼을 보여줍니다. Vue.js는 이 로직 구현을 v-if 로 매우 쉽게 구현합니다.
1
2
3
<div id="app-3">
<p v-if="seen">이제 나를 볼 수 있어요</p>
</div>
1
2
3
4
5
6
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
이를 자바스크립트 구현하면 코드가 꽤 지저분해집니다.
1
2
3
4
5
6
7
8
9
10
let showElement = function(){
let seen = true
let exampleElement = document.querySelector('#app-3 p')
if (seen) {
exampleElement.style.display = 'block'
}else{
exampleElement.style.display = 'none'
}
}
showElement()
다음은 반복문 예제입니다.
1
2
3
4
5
6
7
<div id="app-4">
<ol>
<li v-for="todo in todos">
</li>
</ol>
</div>
1
2
3
4
5
6
7
8
9
10
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'JavaScript 배우기' },
{ text: 'Vue 배우기' },
{ text: '무언가 멋진 것을 만들기' }
]
}
})
자바스크립트로 구현한 코드입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
let setTodos = function(){
let todos = [
{ text: 'JavaScript 배우기' },
{ text: 'Vue 배우기' },
{ text: '무언가 멋진 것을 만들기' }
]
let listElement = document.querySelector('#app-4 ol')
for(let i = 0; i < todos.length; ++i){
listElement.append('<li>' + todos[i].text + '</li>')
}
}
직접 DOM을 조작하여 li태그를 추가하고 있습니다.
정리
Vue.js 한글공식문서 를 보고 자바스크립트 코드를 첨부해봤습니다. 확실히 Vue.js 프레임워크를 사용하면 까다로운 DOM처리 보다 데이터 처리에 집중할 수 있습니다. 이는 백엔드 JSON 데이터를 받아서 화면을 그릴 때 개발자에게 편리함을 줍니다. 다음 포스팅에서는 Vue.js 이벤트핸들링, 인스턴스 개념에 대해 살펴보겠습니다.