[콜럼Vue스] 디렉티브 Directives

• v-text, v-html: 텍스트와 HTML 바인딩.
• v-bind: 속성 값 바인딩.
• v-model: 양방향 데이터 바인딩.
• v-show, v-if: 조건부 렌더링.
• v-for: 리스트 반복 렌더링.
• v-pre, v-once, v-cloak: 렌더링 최적화 및 구문 무시.

---

 

v-text

요소의 텍스트 내용을 바인딩하는 디렉티브. HTML 태그를 무시하고 일반 텍스트로만 렌더링함.

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

message 변수의 값이 텍스트로 출력됨.

 v-html

• 요소에 HTML 내용을 바인딩함. 텍스트 대신 HTML 태그를 렌더링할 수 있음.

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

htmlContent에 HTML 코드가 들어있으면 그 내용을 그대로 렌더링함.

 

v-bind

• HTML **속성(attribute)**에 데이터를 바인딩할 때 사용함. 동적으로 속성 값을 설정할 수 있음.

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

 

• imageUrl에 이미지 경로가 바인딩됨.
• v-bind는 :로 축약할 수 있음.

v-model

• 양방향 데이터 바인딩을 제공하는 디렉티브로, 폼 요소(input, select, textarea 등)와 데이터 간의 상호작용을 쉽게 만들어 줌.

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

 

입력된 값이 즉시 message 변수에 반영되고, message가 변경되면 input의 값도 업데이트됨.

v-show

• 조건부 렌더링을 위해 사용되며, 해당 조건에 따라 요소를 보이거나 숨김. v-show는 요소를 DOM에 남겨둔 채로 CSS의 display 속성만 변경함.

<div v-show="isVisible">This is visible</div>

isVisible이 true일 때 요소가 보이고, false일 때 요소가 숨겨짐.

 

v-if

• 조건부 렌더링으로, 조건이 참일 때만 해당 요소를 DOM에 추가함. v-show와 달리 조건이 거짓일 경우 DOM에서 요소 자체가 제거됨.

<div v-if="isVisible">This will be rendered if true</div>

 

v-else

• **v-if**가 거짓일 경우 대신 렌더링할 요소를 정의함. v-if 바로 뒤에 위치해야 함.

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

 

v-else-if

• v-if의 다중 조건을 처리할 때 사용함. if-else와 비슷한 구조로 여러 조건을 처리할 수 있음.

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Other Type</div>

 

v-for

• 리스트를 반복 렌더링할 때 사용함. 배열이나 객체를 반복하면서 각 항목을 템플릿으로 렌더링함.

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

 

v-pre

• 해당 요소와 그 하위 요소들의 Vue 템플릿 구문을 무시하고 그대로 렌더링하도록 지정함. 즉, 템플릿 엔진의 처리를 하지 않음.

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

이 요소는 Vue에 의해 템플릿으로 처리되지 않고, 그대로 화면에 출력됨.

 

v-once

• 요소를 한 번만 렌더링하며, 이후 데이터 변경이 있어도 다시 렌더링되지 않음. 초기 상태에서만 고정된 값을 렌더링할 때 유용함.

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

 

v-cloak

• Vue 컴포넌트가 렌더링되기 전까지 요소를 숨기도록 함. 이는 Vue 인스턴스가 준비되기 전에 템플릿 구문이 노출되는 것을 방지함. 이 디렉티브는 보통 CSS와 함께 사용됨.

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

CSS : 

[v-cloak] {
  display: none;
}