Vue.js - #4 디렉티브, 반복문

Vue Instance의 라이프사이클을 하기 전에 먼저 반복문을 해보고자 한다.

너무 지루할거 같아서..ㅎㅎ

 

vue에서는 v-XXX라고 생긴 것이 있는데, v-는 Vue에서 제공하는 접두어로서, "디렉티브" 라고 한다.

 

HTML을 이렇게 설정해보자.

<div id="app">
  <div class = "text" v-bind:class="{ 'active' : active }">
   {{ message }}
  </div>
</div>

app이란 아이디를 갖는 div안에, text area를 만들어주고, v-bind 속성으로 active라는 이름의 클래스를 만들어주자.

 

둘째로 CSS를 아래와 같이 만든다.

.text {
  font-size : 60px;
}

.text.active {
  color:red;
}

 

그리고 자바스크립트로 이렇게 만들자.

const viewModel = new Vue({
  el : "#app",
  data : {
    message : "Hello Vue!!",
    active : true
  }
})

 

new Vue({ }) 로 새로운 인스턴스를 생성하고, #app div를 선택, message를 Hello Vue!!를 나타나게 하는 코드이다.

그리고 active 속성으로 true를 주어 v-bind:class ={'active' : active'} 여기서 참이 되도록 하는 것이다.

 

그러면 위의 CSS에서 정의한 바에 따라서, text 클래스의 active 속성 클래스가 참이 되면, Hello Vue!!라는 글자가 

빨간 색으로 나타난다. JS에서 active 속성을 true, false로 바꿔보면서 실행해보자..

 

이처럼 하나의 텍스트, 속성에도 디렉티브를 사용할 수 있지만,

DOM의 구조에도 데이터를 바인딩 할 수 있다. 또, Vue 엘리먼트가 Vue에 갱신/삽입/제거될 때,

자동으로 트랜지션 효과를 적용할 수 있는 강력한 시스템을 제공한다.

 

여기서 트랜지션 효과는 값이 바뀌거나 할 때 애니메이션처럼 자연스럽게 표현해주는 효과이다.

 

이제 v-for , 반복문을 사용해보자.

v-for는 for문처럼 구조적으로 같은 배열 데이터를 순차적으로 표현해낸다.

 

HTML은 이렇게 작성해보자

<div id="app">

  <ul>
    <li v-for="item in items"
    	v-bind:key="item.id">
      {{ item.message }}
    </li>
  </ul>
</div>

 

JS는 이렇게 동일한 구조를 갖는 배열 형태로 만든다.

const viewModel = new Vue({
  el : "#app",
  data : {
    items : [
      {
        id : '1',
        message : 'ABC'
      },
      {
        id : '2',
        message : 'DEF'
      },
            {
        id : '3',
        message : 'GHI'
      }
    ]
  }
})

 

li 태그의 v-for에서 item in items는 당연히도 items의 배열 내부의 객체를 하나씩 item에 넣게 되고,

그 item의 속성 중 message를 li태그 내에서 표현하게 된다.

여기서 v-bind:key=""는, v-for에서 꼭 사용되어야 하는 디렉티브이다.

즉 배열 내에서 고유하게 분별할 수 있는 v-bind:key= 이 부분에 배열을 서로 고유하게 구분할 수 있는

"키"를 넣어줌으로써 잘못 작동하지 않도록 한다.