Vue Directive

---

🧭 Vue Directive란?

정의

Vue Directive는 HTML 속성 앞에 v- 접두사를 붙여 Vue의 반응형 동작을 연결하는 특별한 속성이다.

디렉티브를 통해 바인딩, 이벤트, 조건부 렌더링, 반복 렌더링을 쉽게 표현할 수 있다.

🧩 문법

v-name:argument.modifier="value"

🔗 v-bind

• 속성을 데이터에 연결한다.
• 단방향 바인딩이다.

<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>

Boolean 속성

<button :disabled="isButtonDisabled">버튼</button>

객체 바인딩

const objectOfAttrs = { id: "container", class: "wrapper" };

<div v-bind="objectOfAttrs"></div>

🔁 v-model

• 폼 입력값과 상태를 양방향으로 연결한다.

<input v-model="text1" />
<input type="checkbox" v-model="selected" />
<select v-model="selected2">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

수식어

• .lazy : change 이벤트 후 동기화
• .number : 숫자로 변환
• .trim : 앞뒤 공백 제거

🖱️ v-on

• DOM 이벤트를 연결한다.
• @ 축약 문법을 자주 사용한다.

<button v-on:click="increment">8</button>
<button @click="increment">8</button>

이벤트 객체

<button @click="warn('아직 양식을 제출할 수 없습니다.', $event)">
  제출하기
</button>

이벤트 수식어

수식어	기능
.stop	이벤트 전파 중지
.prevent	기본 동작 중지
.self	자기 자신일 때만 실행
.capture	캡처 단계에서 실행
.once	한 번만 실행
.passive	스크롤 성능 최적화용

키/마우스 수식어

• .enter, .tab, .esc, .space
• .left, .right, .middle
• .ctrl, .alt, .shift, .meta
• .exact

🧱 v-if / v-show

v-if

• 조건이 참일 때만 DOM에 렌더링한다.
• 토글 비용이 높지만, 조건이 자주 바뀌지 않으면 유리하다.

<div v-if="name === 'Alice'">Alice</div>
<div v-else-if="name === 'Cathy'">Cathy</div>
<div v-else>Other</div>

v-show

• 항상 렌더링하고 표시 여부만 바꾼다.
• 자주 보였다 사라지는 요소에 적합하다.

<h1 v-show="ok">안녕!</h1>

🔄 v-for

• 배열이나 객체를 반복 렌더링할 때 사용한다.
• 반복할 때는 key를 함께 두는 것이 좋다.

<div v-for="(item, index) in myArr" :key="index">
   / 
</div>

<li v-for="(value, key) in myObject" :key="key">
  : 
</li>

🪞 v-html

• 문자열을 실제 HTML로 렌더링한다.
• 외부 입력값을 그대로 넣는 것은 주의해야 한다.

<div v-html="rawHtml"></div>

📌 정리

• Vue Directive는 v- 접두사로 반응형 기능을 붙이는 문법이다.
• v-bind, v-model, v-on, v-if, v-show, v-for를 먼저 익히면 된다.
• 복잡한 조건과 반복은 Vue-Template Syntax와 함께 보면 더 이해하기 쉽다.

---

연결문서

• Vue-Template Syntax
• Vue-Component
• Vuejs
• Vue-routing