클래스·스타일 바인딩과 이벤트

화면은 데이터에 따라 모양도 바뀌어야 합니다. "활성화되면 파란색", "에러면 빨간 테두리" 같은 동적 스타일이죠. Vue는 :class 와 :style 로 이를 깔끔하게 표현합니다. 또 이벤트를 다룰 때 자주 쓰는 event.preventDefault() 같은 작업을 수식어로 짧게 처리할 수 있습니다.

학습 목표

• :class 를 객체·배열 문법으로 동적으로 바인딩한다.
• :style 로 인라인 스타일을 데이터와 묶는다.
• 이벤트 수식어(.prevent·.stop 등)로 흔한 처리를 간결하게 한다.
• 키 수식어로 특정 키 입력에만 반응한다.

클래스 바인딩 — 객체 문법

:class 에 객체를 주면, 값이 참인 키만 클래스로 붙습니다.

<script setup>
import { ref } from 'vue';
const isActive = ref(true);
const hasError = ref(false);
</script>

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }">
    상태에 따라 클래스가 바뀜
  </div>
</template>

isActive 가 true 라 active 클래스가 붙고, hasError 가 false 라 text-danger 는 빠집니다.

클래스 바인딩 — 배열 문법

여러 클래스를 나열하거나 조건부 클래스를 섞을 때는 배열을 씁니다.

<template>
  <div :class="[baseClass, isActive ? 'active' : '']">...</div>
  <div :class="[baseClass, { active: isActive }]">...</div>
</template>

💡 TIP — 정적 class 와 :class 를 함께 써도 됩니다. <div class="card" :class="{ active: isActive }"> 처럼 쓰면 둘이 합쳐집니다.

스타일 바인딩

:style 에는 객체를 주며, CSS 속성은 camelCase 또는 따옴표 친 kebab-case로 씁니다.

<script setup>
import { ref } from 'vue';
const color = ref('tomato');
const size = ref(20);
</script>

<template>
  <p :style="{ color: color, fontSize: size + 'px' }">스타일 바인딩</p>
</template>

여러 스타일 객체를 합치려면 배열로 줍니다: :style="[base, override]".

이벤트 수식어

이벤트 처리에서 흔히 하는 작업을 디렉티브 뒤에 . 으로 붙여 간단히 처리합니다.

<template>
  <!-- 폼 기본 제출(새로고침) 막기 -->
  <form @submit.prevent="onSubmit">...</form>

  <!-- 이벤트 버블링 중단 -->
  <div @click="onOuter">
    <button @click.stop="onInner">안쪽</button>
  </div>

  <!-- 한 번만 실행 -->
  <button @click.once="onceHandler">최초 1회</button>
</template>

수식어	효과
.prevent	event.preventDefault()
.stop	event.stopPropagation()
.once	한 번만 실행
.self	이벤트가 자기 자신에서 발생했을 때만

💡 TIP — @submit.prevent 는 폼 처리에서 거의 필수입니다. 매번 핸들러 안에서 e.preventDefault() 를 호출할 필요가 없어집니다.

키 수식어

키보드 이벤트에서 특정 키에만 반응하게 할 수 있습니다.

<template>
  <input @keyup.enter="submit" />     <!-- 엔터 -->
  <input @keyup.esc="cancel" />       <!-- ESC -->
  <input @keyup.ctrl.s="save" />      <!-- Ctrl + S -->
</template>

⚠️ 주의 — 브라우저 단축키(Ctrl+S 등)를 가로채려면 보통 .prevent 도 함께 붙여야 기본 동작이 막힙니다: @keydown.ctrl.s.prevent="save".

요약

• :class 는 객체({클래스: 조건})·배열 문법으로 동적 클래스를 붙인다.
• :style 은 객체로 인라인 스타일을 바인딩하며 속성은 camelCase로 쓴다.
• 이벤트 수식어 .prevent·.stop·.once 등이 흔한 처리를 대신해 준다.
• 키 수식어 .enter·.esc 등으로 특정 키 입력만 처리한다.

연습문제

1. isOn ref에 따라 버튼에 on 클래스가 붙거나 빠지도록 :class 객체 문법으로 작성해 보세요.
2. 슬라이더(range input) 값으로 텍스트의 fontSize 를 :style 로 조절해 보세요.
3. @submit.prevent 를 써서 새로고침 없이 폼 데이터를 콘솔에 출력해 보세요.
4. 입력창에서 엔터를 눌렀을 때만 메시지를 목록에 추가하도록 @keyup.enter 로 작성해 보세요.

힌트 — :class="{ on: isOn }". 슬라이더는 v-model="size" 로 묶고 :style="{ fontSize: size + 'px' }".