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 을 붙이게 된다.

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