Vue_6 디렉티브

Vue.js 자주 사용하는 디렉티브 정리

---

1. v-bind: 동적 속성 바인딩

**v-bind**는 HTML 요소의 속성(예: class, src, href)에 Vue.js의 데이터를 바인딩하여 동적으로 값을 설정할 때 사용됨.

<img v-bind:src="imageUrl" alt="Dynamic Image">
<!-- 축약형 -->
<img :src="imageUrl" alt="Dynamic Image">

 

---

2. v-if, v-else-if, v-else: 조건부 렌더링

**v-if**는 특정 조건에 따라 요소를 렌더링함. **v-else-if**와 **v-else**를 함께 사용해 복잡한 조건부 렌더링도 가능함.

<p v-if="isAdmin">Admin View</p>
<p v-else-if="isUser">User View</p>
<p v-else>Guest View</p>

 

---

3. v-show: 조건부 표시

**v-show**는 요소를 조건에 따라 표시하거나 숨기며, 요소가 DOM에서 제거되지 않고 **display: none**으로만 숨겨짐.

<p v-show="isVisible">This text is visible.</p>

 

---

4. v-for: 리스트 렌더링

**v-for**는 배열 또는 객체를 반복하며 DOM 요소를 렌더링할 때 사용됨. key 속성은 Vue가 각 항목을 구분하여 성능을 최적화할 수 있도록 도와줌.

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

 

---

5. v-model: 양방향 데이터 바인딩

**v-model**은 양방향 데이터 바인딩을 지원하며, 주로 폼 요소에서 사용됨. 사용자 입력이 Vue의 데이터와 자동으로 동기화됨.

<input v-model="message" placeholder="Type something">
<p>{{ message }}</p>

---

6. v-on: 이벤트 처리

**v-on**은 DOM 이벤트(클릭, 입력, 키보드 이벤트 등)를 처리할 때 사용됨. 축약형으로 **@**를 사용할 수 있음.

<button v-on:click="submitForm">Submit</button>
<!-- 축약형 -->
<button @click="submitForm">Submit</button>

---

7. v-pre: 템플릿 해석 생략

**v-pre**는 Vue가 해당 요소의 템플릿 구문을 해석하지 않고 그대로 출력하도록 함. 성능 최적화를 위해 필요하지 않은 요소의 해석을 생략할 수 있음.

<div v-pre>{{ rawMustacheSyntax }}</div>

---

8. v-cloak: 초기 렌더링 시 숨기기

**v-cloak**은 Vue 인스턴스가 마운트될 때까지 요소를 숨김. 보통 CSS와 함께 사용하여 초기 렌더링 시 깜빡임을 방지함.

<style>
  [v-cloak] {
    display: none;
  }
</style>

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

---

9. v-once: 한 번만 렌더링

**v-once**는 해당 요소를 한 번만 렌더링하고, 이후에는 데이터 변경에 반응하지 않음. 정적 콘텐츠에 사용하면 성능 최적화에 도움이 됨.

<p v-once>{{ message }}</p>

---

10. v-html: HTML 콘텐츠 삽입

**v-html**은 해당 요소에 HTML 콘텐츠를 직접 삽입함. **XSS(교차 사이트 스크립팅)**에 주의하여 사용해야 함.

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

 

---

 

11. v-text: 텍스트 콘텐츠 삽입

**v-text**는 Mustache({{ }}) 구문과 유사하게 텍스트 콘텐츠를 삽입함. 좀 더 명시적으로 사용할 수 있음.

<span v-text="message"></span>

---