[Vue3 디렉티브 완전 정복 시리즈]2 기본 디렉티브 5가지

Vue에서 꼭 알아야 할 기본 디렉티브 5가지

디렉티브 복습

지난 시간에 디렉티브는 v-로 시작하며, HTML 태그에 특별한 기능을 더해주는 문법이라고 했습니다.
이번 시간에는 자주 쓰이는 기본 디렉티브 5가지를 간단한 예제와 함께 알아보겠습니다.

1. v-if — 조건에 따라 보여주기

<template>
  <p v-if="loggedIn">환영합니다!</p>
</template>

<script setup>
import { ref } from 'vue'
const loggedIn = ref(true)
</script>

• loggedIn이 true일 때만 <p>가 화면에 나옵니다.
• false일 경우 아예 HTML에서 사라집니다.

2. v-show — 숨기거나 보여주기 (display: none 사용)

<template>
  <p v-show="isVisible">이 문장은 항상 있지만 숨길 수도 있어요.</p>
</template>

<script setup>
import { ref } from 'vue'
const isVisible = ref(false)
</script>

• v-show는 요소를 숨기지만 HTML에는 남아 있습니다.
• CSS의 display: none으로 숨기고, 다시 보여줄 수 있어요.

3. v-for — 목록 반복 출력하기

<template>
  <ul>
    <li v-for="(item, index) in fruits" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const fruits = ref(['사과', '바나나', '포도'])
</script>

• v-for는 리스트(배열)를 반복해서 화면에 출력해줍니다.
• :key는 Vue가 각 항목을 구분할 수 있게 해주는 고유 값입니다.

4. v-model — 양방향 입력 바인딩

<template>
  <input v-model="name" placeholder="이름을 입력하세요" />
  <p>{{ name }}님, 반갑습니다!</p>
</template>

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

• v-model은 입력된 값을 name 변수에 자동으로 연결합니다.
• 입력하면 값이 즉시 반영되고, 바뀐 값도 화면에 바로 보입니다.

5. v-on — 이벤트 연결하기 (클릭 등)

<template>
  <button v-on:click="count++">클릭 횟수: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

• v-on은 사용자의 행동(이벤트)을 감지해서 코드를 실행합니다.
• 보통 v-on:click을 많이 쓰며, 짧게 @click이라고 써도 됩니다.

단계 요약 (한눈에 정리)

• v-if: 조건이 true면 화면에 보임, 아니면 아예 제거됨
• v-show: CSS로 보여주거나 숨김, HTML에는 남아 있음
• v-for: 배열의 항목을 반복해서 화면에 출력함
• v-model: 입력값을 변수와 자동으로 연결함
• v-on: 클릭, 입력 등 이벤트를 감지해서 함수 실행

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.