Vue.js 디렉티브와 고급 템플릿 문법

Vue.js 디렉티브란?

Vue.js의 **디렉티브(Directive)**는 HTML 요소에 특별한 동작을 추가하는 속성입니다. Vue의 디렉티브는 v-로 시작하며, 요소의 동작을 Vue의 반응형 데이터와 연결하는 역할을 합니다.

이번 글에서는 Vue의 다양한 디렉티브와 고급 템플릿 문법을 다뤄보겠습니다.

v-bind 디렉티브를 사용하면 HTML 요소의 속성을 Vue 데이터와 연결할 수 있습니다.

<img v-bind:src="imageUrl" alt="이미지 설명">

단축형으로 :속성명을 사용할 수도 있습니다.

<img :src="imageUrl" alt="이미지 설명">

요소를 조건에 따라 렌더링할 때 v-if와 v-else를 사용할 수 있습니다.

<p v-if="isVisible">이 메시지는 보입니다!</p>
<p v-else>이 메시지는 숨겨져 있습니다.</p>

v-show는 v-if와 다르게 요소를 항상 렌더링하지만, CSS display 속성을 변경하여 표시 여부를 조절합니다.

<p v-show="isVisible">이 메시지는 보입니다!</p>

v-for 디렉티브를 사용하면 배열 데이터를 기반으로 리스트를 렌더링할 수 있습니다.

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ index + 1 }}. {{ item }}
  </li>
</ul>

v-model은 입력 요소와 Vue 데이터 간의 양방향 바인딩을 제공합니다.

<input v-model="username" placeholder="이름을 입력하세요">
<p>입력된 이름: {{ username }}</p>

Vue의 **슬롯(Slot)** 기능을 활용하면 재사용 가능한 컴포넌트를 더욱 유연하게 만들 수 있습니다.

<template v-slot:header>
  <h1>헤더 영역</h1>
</template>

v-once 디렉티브를 사용하면 해당 요소가 한 번만 렌더링되고 이후에는 변경되지 않습니다.

<p v-once>이 텍스트는 변경되지 않습니다: {{ message }}</p>

v-pre는 Vue의 템플릿 문법을 무시하고 원본 HTML을 그대로 렌더링합니다.

<p v-pre>{{ 이 내용은 Vue에 의해 해석되지 않습니다 }}</p>

v-cloak은 Vue 인스턴스가 마운트되기 전까지 요소를 숨길 수 있도록 도와줍니다.

<p v-cloak>이 내용은 Vue가 마운트될 때까지 숨겨집니다.</p>

CSS와 함께 사용하면 효과적으로 초기 깜빡임을 방지할 수 있습니다.

[v-cloak] {
  display: none;
}

이번 글에서는 Vue.js의 **디렉티브**와 **고급 템플릿 문법**에 대해 알아보았습니다.

다음 글에서는 **Vue.js의 컴포넌트 시스템**에 대해 깊이 있게 다뤄보겠습니다. 많은 기대 부탁드립니다! 😊