Vue의 렌더링 문법

v-for

v-for은 data()의 return 값으로 내보내지는 리스트를 반복해서 렌더링을 하는 Vue의 디렉티브이다. v-for은 (값, 인덱스) 구조로 이루어져 있으며, 아래의 코드처럼 productList를 순회하면서 <tr></tr>을 출력하는 방식을 지시한다.

 

productList는 data()의 return 값이며 배열 형태를 가진다. v-for을 사용할 때 주의할 점은 v-bind를 통해 key값을 지정해줘야 한다는 점이다.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>제품명</th>
          <th>가격</th>
          <th>카테고리</th>
          <th>배송료</th>
        </tr>
      </thead>
      <tbody>
        <tr v-bind:key="index" v-for="(product, index) in productList">
          <td>{{ product.product_name }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.category }}</td>
          <td>{{ product.delivery_price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      productList: [
        {
          product_name: "기계식키보드",
          price: 10000,
          category: "노트북",
          delivery_price: 1000,
        },
        {
          product_name: "마우스",
          price: 1002300,
          category: "기계",
          delivery_price: 2000,
        },
        {
          product_name: "종이컵",
          price: 1120000,
          category: "종이",
          delivery_price: 3000,
        },
        {
          product_name: "연필",
          price: 10032100,
          category: "필기구",
          delivery_price: 4000,
        },
      ],
    };
  },
};
</script>

 

 

v-if

조건에 따라 태그를 출력해 주는 디렉티브이며, 조건이 true일 때만 태그가 렌더링 된다. 아래의 코드처럼 bRender가 true일 때만 <h1>이 출력이 되며, 반대로 v-else를 사용하면 bRender가 false일 때 <h1>이 출력이 된다.

 

v-show

v-if처럼 true일 때만 출력이 되지만, v-if와 다른 점은 v-if는 블록 자체를 컨트롤한다면, v-show는 css의 display를 통해 컨트롤된다는 점이다. 따라서 화면 내에서 자주 토글이 발생한다면 v-show를, 아니면 v-if를 사용하는 것이 좋다.

 /* v-if, v-else, v-show 예시코드 */

<template>
  <h1 v-if="bRender">true</h1>   /* 미출력 */
  <h2 v-else="bRender">false</h2>  /* 출력 */
  <h3 v-show="bRender">true</h3> /* 미출력 */
</template>
<script>
export default {
  data() {
    return {
      bRender: false
    }
  }
}
</script>

 

 

 

v-on

v-on은 click과 change 처럼 이벤트를 처리해 주는 디렉티브로, v-on 대신 @를 사용해서 표현할 수도 있다. 기본적으로 click 이벤트와 change 이벤트를 다뤄야 할 때 사용된다. 

/* v-on:click 코드 */
<template>
  <div>
    <button type="button" v-on:click="increaseCounter">Add</button>
    <!-- 클릭시에 특정 파라미터 전달하고 싶을 때 -->
    <button type="button" v-on:click="setCounter(10)">set</button>
    <p>The Counter is : {{ counter }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },

  methods: {
    increaseCounter() {
      this.counter = this.counter + 1;
    },
    setCounter(params) {
      this.counter = params;
    },
  },
};
</script>

 

 

/* v-on:change 코드 */
<template>
  <div>
    <select v-model="selectedValue" @change="changeSelect">
      <option value="seoul">seoul</option>
      <option value="busan">busan</option>
      <option value="daejeon">daejeon</option>
    </select>
    <p>{{ selectedValue }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedValue: "",
    };
  },

  methods: {
    changeSelect() {
      alert(this.selectedValue);
    },
  },
};
</script>

 

 

 

computed와  watch

두 가지 모두 데이터의 변경이 일어나는지 감시하고, 변경될 때마다 정의된 함수가 실행된다.

 

computed

• 종속 대상을 따라 캐싱되기 때문에 대상이 변경되지 않는 한 값이 바뀌지 않음
• computed에 의해 정의된 함수는 함수이자 동시에 인스턴스 데이터 값임

watch

• computed와 다르게 watch에 정의된 데이터 값 하나만을 감시하기 위한 용도로 사용
• 종속 대상이 변경됐을 때만 watch가 실행(최초에 실행되지 않음)
• computed와는 다르게 명령형 프로그래밍