[Vue] vue의 기본개념

vue에서 사용되는 기본 개념중
v-on, v-bind, v-model, v-for, [v-if / v-else / v-show]의 개념들을 몇 가지 간단한 예시와 함께 살펴보려고 한다.

v-on (@)

v-on은 엘리먼트에 이벤트 리스너를 연결한다.

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

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

onclick과 같이 동작하며 methods에 있는 함수를 호출하기 위해 v-on:click을 해준다.

<div id="app">
    <app-content v-on:pass="deliverNum"></app-content>
</div>

<script>
    var appContent = {
      template: '<div>content<button v-on:click="passNum">pass</button></div>',
      methods: {
        passNum: function() {
          this.$emit('pass', 10);
        }
      }
    }

    new Vue({
      el: '#app',
      components: {
        'app-content': appContent
      },
      data: {
        num: 0
      },
      methods: {
        deliverNum: function(value) {
          this.num = value;
        }
      }
    })
</script>

하위 컴포넌트에서 상위 컴포넌트로 전달하기 위해서는 $emit에 값을 전달한다. 위에서는 this.$emit('pass', 10)을 전달했는데, 상위컴포넌트에서 v-on:pass="deliverNum" 같이 전달받은 $emit의 첫번째 인자를 적어주면, 상위 컴포넌트의 methods의 deliverNum이라는 함수가 실행된다.

v-bind (:)

v-bind는 data에 있는 값들을 이용할 때 사용합니다.

<div id="app">
    <app-header v-bind:propsdata="num"></app-header>
</div>

<script>
    var appHeader = {
      template: '<div>header</div>',
      props: ['propsdata']
    }

    new Vue({
      el: '#app',
      components: {
        'app-header': appHeader,
      },
      data: {
        num: 0
      },
    })
</script>

상위 컴포넌트에서 하위 컴포넌트로 전달할 값이 있을 때 v-bind와 props를 같이 사용한다. 하위컴포넌트는 상위 컴포넌트로 부터 어떻게 데이터를 전달받을지 props의 값으로 지정해준다. 상위 컴포넌트는 template에서 하위 컴포넌트에 v-bind:propsdata="num" 내려줄 데이터와 하위 컴포넌트에서 미리 지정한 props의 값인 propsdata를 바인딩해준다.

<div id="app">
    <p v-bind:id="uuid" v-bind:class="name">{{ num }}</p> 
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      uuid: 'abc1234',
      name: 'text-blue',
    }
  })
</script>

data의 값으로 uuid와 name을 id와 class명으로 사용하기 위해 바인딩 해준다.

v-model

v-model 디렉티브를 사용하면 input과 textarea를 양방향 바인딩 해줄수 있다.

<div id="app">
  <input v-model="message">
  <p>메시지: {{ message }}</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '',
    }
  })
</script>

위와 같이 data의 message를 input에 v-model의 값으로 넣어주면 양방향 바인딩이 되어서, input의 value과 message와 연동되어 아래 p태그에 변경되는 값이 실시간으로 반영된다.

v-for

v-for는 배열의 값을 하나씩 가져와서 값을 넣어주고 결과를 return한다.

<li v-for="Item in Items></li>

위의 Items는 배열이고, map함수를 사용하는 것과 비슷하다.

v-if / v-else / v-show

위의 3가지 디렉티브는 조건부 렌더링을 가능하게 해준다.

<div id="app">
  <div v-if="loading">
    Loading...
  </div>
  <div v-else>
    test user has been logged in
  </div>
  <div v-show="loading">
    Loading...
  </div>
</div>

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

data에 담겨진 loading이 true인 경우에 v-if가 실행되고, false인 경우에 v-else가 실행된다. v-show도 조건부 렌더링이지만, v-if와 차이점은 항상 렌더링되기는 하지만, css의 속성에 의해서 보이지 않는다는 것이다. v-if는 조건이 맞지 않으면 아예 렌더링 되지 않는다.