TIL48.Vue directive

vue에서 기본적으로 제공하는 기본 디렉티브에 대해 알아보자.

v-on

이벤트 핸들링은 기본적으로 v-on:이벤트 형태로 핸들링할 수 있다.
v-on은 자주 사용되기 때문에 축약형인 @를 사용하기도 한다.

<template>
  <button v-on:click="getData"></button>
</template>

<script>
    export default {
	methods: {
      	  getData() {
            console.log('getData');
          }
    	}
    }
</script>

v-bind

v-bind는 아이디, 클래스, 스타일등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 방식이다.

 <div id="app">
    <h1>Hello, {{ name }}</h1>
    <img v-bind:src="icecream"/>
  </div>
  
  <script>
  new Vue({
  el: '#app', 
  data: {
    name: 'Vue',
    icecream: 'https://imgh.us/icecream_1.jpg'
  }   
})
</script>

v-model

양방향 데이터를 공유할 때 사용한다. input,select,textarea 태그에서만 사용가능하다.

<div id="app">
  <input v-model="message">
  <p>메시지: {{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: '',
    }
  })
</script>

v-if

if조건문을 구현할 때 사용한다. v-else,v-else-if 역시 존재한다.

<div id="app"> 
	<div v-if="type === 'A'"> A </div> 
	<div v-else-if="type === 'B'"> B </div> 
	<div v-else-if="type === 'C'"> C </div> 
	<div v-else> Not A/B/C </div> 
</div>

* v-if와 마찬가지로 v-show 역시 조건부 렌더링을 할 때 사용된다. 둘의 차이점은 v-if는 조건에 따라 컴포넌트가 실제로 제거되고 생성되지만, v-show 조건에 상관없이 렌더링이 이루어지고,단순히 css 의 display 속성만 변경된다.

v-for

for반복문을 구현할 때 사용한다. react에서 목록을 불러올 때 사용한 map함수와 비슷한 기능을 한다.

<div id="app">
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      list: ['딸기', '바나나', '사과'],
    }
  })
</script>