[Vue.js] Vue Directive

• Vue Directive란?

Vue.js에서 DOM 요소의 동작을 제어하는 특수한 속성으로,
v- 로 시작하는 명령어를 통해 데이터 바인딩, 조건부 렌더링, 반복 렌더링 등을 수행한다.

• v-bind

HTML 요소의 속성(attribute)에 Vue 인스턴스의 데이터를 바인딩한다.

<img v-bind:src="imageSrc" alt="AmazingSpiderMan">

※ v-bind는 축양형으로 :를 사용할 수 있다.
<img :src="imageSrc" alt="AmazingSpiderMan">

• v-model

폼 요소와 Vue 인스턴스의 데이터를 양방향으로 바인딩한다. 
주로 <input>, <textarea>, <select> 요소와 함께 사용된다.

<input v-model="message" placeholder="어메이징 스파이더맨">

이렇게 하면 message 데이터 속성과 입력 필드의 값이 실시간으로 동기화된다.

• v-if, v-else-if, v-else

조건에 따라 DOM 요소의 렌더링을 제어한다.

<p v-if="status === 'loading'">로딩 중...</p>
<p v-else-if="status === 'success'">성공적으로 완료되었습니다.</p>
<p v-else>오류가 발생했습니다.</p>

v-if는 조건이 true일 때만 해당 요소를 렌더링하며, false일 경우 DOM에서 완전히 제거한다. 
반면, v-show는 요소를 숨길 때 display: none 스타일을 적용하여 항상 DOM에 존재하게 한다. 

• v-for

배열이나 객체를 반복하여 DOM 요소를 렌더링한다.

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-for을 사용할 때는 각 항목에 고유한 key를 부여하는 것이 성능 최적화에 도움이 된다.

• v-on

DOM 이벤트에 메서드를 바인딩한다.

<button v-on:click="increment">클릭</button>

※ v-on은 축약형으로 @을 사용할 수 있다.
<button @click="increment">클릭</button>

• v-show

요소의 표시 여부를 제어한다. v-if와 달리 요소를 DOM에서 제거하지 않고, 
display CSS 속성을 토글하여 표시한다.

<p v-show="isVisible">이 문장은 isVisible이 true일 때 보입니다.</p>

• v-slot

슬롯을 사용하여 컴포넌트의 콘텐츠를 분해한다.

<custom-component>
  <template v-slot:default>
    <p>슬롯에 전달할 콘텐츠</p>
  </template>
</custom-component>

• v-pre

자식 노드와 그 이후의 모든 노드를 컴파일하지 않도록 한다. 주로 템플릿을 렌더링할 때 사용된다.

<div v-pre>
  {{ this will not be compiled }}
</div>

• v-cloak

엘리먼트와 그 자식 엘리먼트가 Vue 인스턴스와 연결될 때까지 DOM에서 해당 엘리먼트를 숨긴다.

<div v-cloak>
  {{ message }}
</div>