레슨 9 / 9·15분
Vue.js 레퍼런스
디렉티브 요약
- •
v-bind(:) — 속성 바인딩::src="url",:class="{ active: isOn }" - •
v-on(@) — 이벤트 리스너:@click="fn",@keyup.enter="fn" - •
v-model— 양방향 바인딩:v-model="text", 수식어:.lazy,.number,.trim - •
v-if/v-else-if/v-else— 조건부 렌더링 (DOM 추가/제거) - •
v-show— 조건부 표시 (display CSS 토글, DOM 유지) - •
v-for— 리스트 렌더링:v-for="item in list" :key="item.id" - •
v-slot(#) — 슬롯 콘텐츠: - •
v-pre— 컴파일 건너뛰기 ({{ }} 그대로 표시) - •
v-once— 한 번만 렌더링 (정적 콘텐츠 최적화) - •
v-memo— 메모이제이션 (조건부 리렌더링 방지)
Composition API 핵심
typescript
// ─── 반응형 데이터 ───
const count = ref(0); // 원시 값 (.value 필요)
const state = reactive({ x: 0 }); // 객체 (직접 접근)
const doubled = computed(() => count.value * 2); // 파생 값
// ─── 감시 ───
watch(source, (newVal, oldVal) => {}); // 명시적 감시
watchEffect(() => { /* 자동 추적 */ }); // 자동 감시
// ─── 라이프사이클 ───
onMounted(() => {}); // DOM 마운트 후
onUpdated(() => {}); // DOM 업데이트 후
onUnmounted(() => {}); // 컴포넌트 제거 시
onBeforeMount(() => {}); // 마운트 전
onBeforeUpdate(() => {}); // 업데이트 전
onBeforeUnmount(() => {}); // 제거 전
// ─── 의존성 주입 ───
provide('key', value); // 조상에서 제공
const val = inject('key'); // 자손에서 주입
// ─── 템플릿 참조 ───
const el = ref<HTMLElement>(); // template ref
const comp = ref<InstanceType<typeof MyComp>>(); // 컴포넌트 ref컴포넌트 매크로
typescript
// <script setup> 전용 매크로 (import 불필요)
// Props 정의
const props = defineProps<{
title: string;
count?: number;
}>();
// Props + 기본값
const props = withDefaults(defineProps<{
title: string;
count?: number;
}>(), {
count: 0,
});
// Emit 정의
const emit = defineEmits<{
change: [value: string];
submit: [];
}>();
// v-model 바인딩 (Vue 3.4+)
const model = defineModel<string>();
// 컴포넌트 외부 노출
defineExpose({
publicMethod,
publicData,
});
// 슬롯 타입
const slots = defineSlots<{
default: (props: { item: Item }) => any;
header: () => any;
}>();이벤트 수식어
- •
@click.stop— event.stopPropagation() - •
@click.prevent— event.preventDefault() - •
@click.once— 한 번만 실행 - •
@click.self— 이벤트 대상이 해당 요소일 때만 - •
@keyup.enter— Enter 키 - •
@keyup.escape— Escape 키 - •
@keyup.tab/.space/.delete/.up/.down— 특수 키 - •
@click.ctrl/.shift/.alt/.meta— 수식어 키 조합
💡
Vue 공식 문서(vuejs.org)는 한국어 번역이 잘 되어 있습니다. Composition API와 Options API 두 가지 스타일의 예제를 모두 제공하므로 참고하기 좋습니다.