[Vue.js] 기본 디렉티브(Directive)

1. 디렉티브(Directive : 지시어)란?

HTML Element 안에 v- 접두어를 가진 attribute를 의미합니다. 표현식에 직접 값을 넣거나 미리 정의해둔 뷰 인스턴스와 데이터 바인딩하여 반응적으로 표현식을 변경할 수 있습니다.

디렉티브는 기본 디렉티브와 사용자 지정 디렉티브가 있다. 이번에는 기본 디렉티브에 대해 정리하겠습니다.

2. 디렉티브 종류

예시 뷰 인스턴스

new Vue({ 
  el: "#app", 
  data: {
    list: ['One','Two','Three','four','five','six'],
    toggle: true,
    message: 'hello!',
    imgUrl: 'https://img.test.png'
  },
  methods : {
  	switch : function(){
    	this.toggle = !this.toggle; 
    }
  }
})

1) v-bind

뷰 인스턴스와 데이터나 이벤트를 바인딩하거나 하위 컴포넌트에 데이터를 전달 할 때 사용합니다.
v-를 생략하고 :로 축약해서 사용할 수 있습니다.

...
<div id="app">
  <img v-bind:src="imgUrl"/>
    
  아래 방법으로도 가능합니다.
  <img :src="imgUrl"/>
</div>
...

2) v-model

뷰 인스턴스와 양방향으로 바인딩해서 뷰 인스턴스의 data 또는 Input 태그를 통해 바인딩한 값을 수정할 수 있습니다.

...
<div id="app">
  <input v-model="message" />
</div>
...

3) v-once

뷰 인스턴스와 한번만 렌더링을 수행합니다. 이 후 바인딩된 데이터가 변경되어도 처음에 입력한 값만 보여줍니다.

...
<div id="app">
  <input v-once="message" />
</div>
...

4) v-for

반복적으로 표현해야할 엘리먼트를 출력할 때 사용됩니다. 그리고 리스트 형식으로 바인딩된 데이터의 요소를 꺼내 사용할 수 있습니다.

...
<div id="app">
  <p v-for="(item, index) in list">
    [{{ index }}] {{item}} 
  </p>
</div>
...

5) v-if, v-else-if, v-else

v-if 디렉티브 값에 true, false 값을 넣어 반응적으로 엘리먼트를 표시하거나 숨길 수 있습니다.

...
<div id="app">
  <template v-if="toggle">
    <p>안녕하세요</p>
  </template>
</div>
...

6) v-text

v-text 디렉티브는 innerText에 값을 넣은 것과 동일한 기능이며, 값을 넣으면 태그에 해당 문자를 그대로 보여줍니다. 

...
<div id="app">
  <input v-bind:text="message" />
</div>
...

7) v-on

v-on 디렉티브는 엘리먼트에 이벤트를 바인딩할 때, 사용합니다.  기존에 사용했던 click, scroll 등.. 여러 이벤트를 사용할 수 있습니다.  v-on을 생략하고, @으로 축약해서 사용할 수 있습니다.

...
<div id="app">
  <template v-if="toggle">
    <p>안녕하세요</p>
  </template>
  <button @:click="switch"/>
</div>
...