Vue

조건부 렌더링

v-if와 v-for 동시 사용 피하기

나쁜 예시)

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

좋은 예시)

<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isActive">
      {{ user.name }}
    </li>
  </template>
</ul>

<template>태그를 활용하여 해당하는 템플릿 요소를 렌더링하지 않도록한다.
v-for는 반복만 할뿐 v-if에서 렌더링이 이루어진다.

이벤트 핸들링

v-on이벤트 수식어

• .stop 이벤트 중지
• .prevent 이벤트 막기
• .capture
• .self
• .once 이벤트 한번만 수행
• .passive 화면의 렌더링과 로직의 동작을 분리

v-on키 수식어

• .enter
• .tab
• .delete “Delete” 와 “Backspace” 키 모두를 캡처
• .esc
• .space
• .up
• .down
• .left
• .right