[Vue.js] Vue.js 디렉티브

Vue.js는 디렉티브(Directives)를 사용하여 HTML 요소에 특별한 동작을 적용하는 방법을 제공합니다. 디렉티브는 v- 접두사를 갖는 특수한 속성으로, Vue 인스턴스의 데이터와 상호작용하도록 합니다. 아래에서 Vue 디렉티브에 대해 자세히 알아보겠습니다.

---

v-bind

v-bind 디렉티브는 Vue 데이터와 HTML 속성을 바인딩합니다. 데이터 값을 동적으로 HTML 속성에 연결할 때 사용됩니다.

<img v-bind:src="imageUrl">

위의 코드에서 v-bind:src는 Vue 인스턴스의 imageUrl 데이터를 src 속성과 바인딩하여 이미지 URL을 동적으로 설정합니다.

간단한 형태로 축약하여 사용할 수도 있습니다.

<img :src="imageUrl">

위의 코드와 같이 :로 축약하여 표현할 수 있습니다.

---

v-if와 v-else

v-if 디렉티브는 조건부 렌더링을 위해 사용되며, 조건이 참일 때 해당 요소를 렌더링합니다. v-else는 v-if와 함께 사용되어 조건이 거짓일 때 렌더링됩니다.

<div v-if="isVisible">Visible</div>
<div v-else>Not Visible</div>

위의 코드에서 isVisible 데이터에 따라 첫 번째 div 요소 또는 두 번째 div 요소가 렌더링됩니다.

---

v-for

v-for 디렉티브는 배열 데이터를 반복하여 요소를 렌더링합니다. 반복문을 사용하여 리스트와 테이블 등을 동적으로 생성할 때 유용합니다.

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

위의 코드에서 items 배열을 반복하여 li 요소를 생성하고, 각 요소의 name 값을 출력합니다. :key 속성은 Vue가 각 항목을 구별하는데 도움을 주는 유일한 값으로 사용됩니다.

---

v-on

v-on 디렉티브는 이벤트 리스너를 설정합니다. HTML 요소에서 발생하는 이벤트와 Vue 인스턴스의 메서드를 연결할 수 있습니다.

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

위의 코드에서 v-on:click은 increment 메서드를 클릭 이벤트에 바인딩합니다.

간단한 형태로 축약하여 사용할 수도 있습니다.

<button @click="increment">Increment</button>

위의 코드와 같이 @로 축약하여 표현할 수 있습니다.

---

v-model

v-model 디렉티브는 폼 입력 요소와 Vue 데이터를 양방향으로 바인딩합니다. 사용자 입력과 Vue 데이터의 변경 사항이 서로 동기화됩니다.

<input v-model="message" type="text">

위의 코드에서 message 데이터와 input 요소의 값을 양방향으로 바인딩합니다.

---

Vue 디렉티브는 v-bind, v-if, v-for, v-on, v-model 등 다양한 기능을 제공하여 Vue 애플리케이션의 동적인 UI를 구현하는데 사용됩니다. 이를 활용하여 데이터와 템플릿을 유연하게 바인딩하고, 조건부 렌더링과 반복문을 사용하여 다양한 UI 요소를 조작할 수 있습니다. Vue 디렉티브를 잘 이해하고 활용하여 효율적인 웹 애플리케이션을 개발해보세요!