Vue 내장디렉티드 정리해봄..

v-text

➡️ 요소의 textContent를 데이터로 교체
예시:

<span v-text="msg"></span> <!-- {{ msg }} 와 동일 -->

v-html

➡️ HTML 코드를 그대로 삽입 (innerHTML)
예시:

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

v-if / v-else-if / v-else

➡️ 조건에 따라 요소를 DOM에 추가/제거
예시:

<p v-if="ok">Yes</p>
<p v-else>No</p>

v-show

➡️ DOM은 유지하고 CSS display 속성으로 토글
예시:

<p v-show="visible">보였다 숨겼다</p>

v-for

➡️ 배열/객체/범위를 반복 렌더링
예시:

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

v-bind (:)

➡️ HTML 속성/props를 동적으로 바인딩
예시:

<img :src="imageUrl">

v-on (@)

➡️ DOM 이벤트에 메서드 연결
예시:

<button @click="doSomething">Click</button>

v-model

➡️ 폼 요소와 데이터의 양방향 바인딩
예시:

<input v-model="message">

v-slot

➡️ 컴포넌트 슬롯 영역에 콘텐츠 주입
예시:

<Child>
  <template v-slot:header>헤더 내용</template>
</Child>

v-once

➡️ 한 번만 렌더링하고 이후 갱신 안 함
예시:

<h1 v-once>{{ title }}</h1>

v-memo

➡️ 의존 값이 변할 때만 블록 다시 렌더링
예시:

<section v-memo="[items.length]">...</section>

v-cloak

➡️ 초기 {{ }} 템플릿이 보이지 않도록 숨김
예시:

<div id="app" v-cloak>{{ msg }}</div>

v-pre

➡️ Vue 해석을 건너뛰고 그대로 렌더링
예시:

<span v-pre>{{ raw }}</span>