VueJS - 시작하기

Vuejs 시작하기

1
Vuejs는 기본적으로 IE8 이하 브라우저는 지원하지 않는다. Vuejs를 프로젝트에 도입하기 전에는 프로젝트의 스펙에 따라 검토해봐야 한다.

Vuejs는 하나의 파일 안에 html, css, javascript를 사용할 수 있다. 그러한 점에서 볼 떄는 보다 편한 파일 관리가 가능하며, 상황에 따라서는 각자 분리를 할 수 있다. 다른 프레임워크에 비해 Vuejs가 런닝커브가 낮다고는 하지만, 사실 그렇게 낮은지는 잘 모르겠다. React와는 Vitual Dom의 존재, 단방향 데이터 흐름 등 비슷한 부분이 있지만, 생명주기는 서로 비슷한 듯 다르다. 일단 기본적으로 Vue는 화면 View 만을 담당하는 프레임 워크이다. 단순 cdn을 이용해서도 쉽고 빠르게 학습이 가능하다.

다른 프레임워크와의 비교가 궁금하면 여기 를 클릭하면 된다.

선언적 렌더링을 이용한 간단한 탭 구현

Vuejs 의 경우 사용법이 공식 홈페이지 에서 자세하게 기술되어 있어, 기초에 대한 부분은 공식 홈페이지에서 공부하는 것이 더 쉽다.
간단한 탭을 구현하는 데에는 v-bind, v-on, v-for 등의 기본적인 문법을 이용하여 구현했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="module_tab">
<ul>
<li class="on">
<button type="button"><span>Tab01</span></button>
<div class="module_tab__contents">
Tab01 Contents
</div>
</li>
<li>
<button type="button"><span>Tab02</span></button>
<div class="module_tab__contents">
Tab02 Contents
</div>
</li>
<li>
<button type="button"><span>Tab03</span></button>
<div class="module_tab__contents">
Tab03 Contents
</div>
</li>
</ul>
</div>

html Dom 구조는 위와 같다. tab을 active 시키는 특정 class는 임의로 on class로 부여 했다. 위의 부분을 좀 더 다듬으면 아래와 같이 된다.

1
2
3
4
5
6
7
8
9
10
<div class="module_tab" id="tab" data-module-tab="wrap">
<ul>
<li v-for="item in items">
<button type="button"><span>{{ item.button }}</span></button>
<div class="module_tab__contents">
{{ item.contents }}
</div>
</li>
</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var app = new Vue({
el: '#tab',
data: {
activeIndex: 0,
items: [{
'button': 'tab01',
'contents': 'tab01 contents'
},{
'button': 'tab02',
'contents': 'tab02 contents'
},{
'button': 'tab03',
'contents': 'tab03 contents'
}]
},
methods: {
}
})

v-for를 이용하여 리스트를 랜더링하고 하며, 탭을 active 시키는 class를 위한 flag index 값(activeIndex) 을 data에 부여한다. 이 activeIndex는 현재 활성화 되어있는 Tab의 Index와 일치를 시켜줄 것이고, 일치를 하면 class를 부여하는 기능을 구현할 예정이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="module_tab" id="tab" data-module-tab="wrap">
<ul>
<li
v-for="(item, index) in items"
:class="[{ on : index == activeIndex }]"
>
<button
@click="tabToggle( index )"
type="button"
><span>{{ item.button }}</span></button>
<div class="module_tab__contents">
{{ item.contents }}
</div>
</li>
</ul>
</div>

v-for에는 두번째 인자로는 현재 항목에 대한 index값을 제공한다. 그 index를 조건부 class에 대입하여, activeIndex와 현 배열의 index 값이 일치할 경우 class명 on을 부여한다. 또한, 그 하위 버튼에는 클릭하면 현재의 index값을 파라미터로 넘기도록 이벤트를 바인딩 하였다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var app = new Vue({
el: '#tab',
data: {
activeIndex: 0,
items: [{
'button': 'tab01',
'contents': 'tab01 contents'
},{
'button': 'tab02',
'contents': 'tab02 contents'
},{
'button': 'tab03',
'contents': 'tab03 contents'
}]
},
methods: {
tabToggle (targetIndex) {
this.activeIndex = targetIndex;
}
}
})

버튼에 바인딩 된 tabToggle은 파라미터로 해당 index의 값을 받으며, 그 함수 안에서는 로컬 데이터 activeIndex의 값에 받은 index 값을 대입시켜준다. 그러면 클릭 시, 클릭한 버튼에 해당하는 배열의 index 값을 activeIndex 값에 대입하며 Dom은 activeIndex 와 일치하는 index의 리스트에 class명 on 을 붙이게 된다.

이에 대한 샘플은 해당 링크 를 클릭하면 볼 수 있다.

Thanks for your reading, this article is provided by Martin If reproduced, please indicate the source:Martin(https://github.com/martinYounghoonKim
Javascript에 날개를 날아줘!
VueJS의 컴포넌트화