cover

[Vue 3] 디렉티브 (Directive)

categoryCategory
Vue
tagsTags
Directive
calendarCreated
2022-11-04 오후 22:09
calendarUpdated
2023-06-19 오전 06:03

Vue에서는 DOM 다루기 편하게 할 수 있도록 디렉티브(Directive)를 지원하는데요. 이번 글에서는 간단하게 어떤 것들이 있는지 보겠습니다.

디렉티브 미리보기

디렉티브

디렉티브(Directive)는 번역하면 지시문이란 뜻으로, Vue에서만 사용하는 특수한 속성입니다.

디렉티브 문법

v- 접두어를 가지고 있어서 기존의 HTML 속성들과 구분을 할 수 있습니다.

html
      <태그 v-명칭="값"></태그>

특정 디렉티브(v-for)를 제외하고, 디렉티브에 들어가는 값들은 Javascript 표현식입니다. 콧수염 문법({{}})에서처럼요.

html
      <태그 v-명칭="count + 1"></태그>
<태그 v-명칭="condition ? 'hello' : 'bye'"></태그>
<태그 v-명칭="myFunc(data)"></태그>

디렉티브 모음

디렉티브의 종류는 다음과 같습니다. 여기서는 간단하게 다루고 앞으로 자세히 하나씩 다뤄보겠습니다.

v-text : innerText(textContent) 와 동일한 기능으로 vue 데이터 값을 그대로 보여줍니다.
html
      <p v-text="greet"></p>

<!-- 렌더링 결과 (greet: 'hi')-->
<p>hi</p>
v-html : innerHTML과 동일한 기능으로 vue 데이터 값을 HTML로 파싱(parsing)해서 보여줍니다.
html
      <p v-html="html"></p>

<!-- 렌더링 결과 (html: '<h1>안녕하세요</h1>')-->
<p><h1>안녕하세요</h1></p>
v-show : css display를 조작해 조건에 따라 보여주거나 사라지게 합니다.
html
      <p v-show="condition"></p>

<!-- 렌더링 결과 (condition: true) -->
<p></p>

<!-- 렌더링 결과 (condition: false) -->
<p style="display: none"></p>
v-if, v-else-if, v-else : v-show처럼 조건에 따라 보여주거나 사라지게 하지만 DOM 자체에서 사라지게 합니다.
html
      <p v-if="length > 3">length > 3</p>
<p v-else-if="length > 1">length > 1</p>
<p v-else>length <= 1</p>

<!-- 렌더링 결과 (length: 5) -->
<p>length > 3</p>
<!---->
<!---->

<!-- 렌더링 결과 (length: 2) -->
<!---->
<p>length > 1</p>
<!---->

<!-- 렌더링 결과 (length: 0) -->
<!---->
<!---->
<p>length <= 1</p>
v-for : 하나의 태그를 반복적으로 여러 개 렌더링할 수 있게 해줍니다.
html
      <p v-for="item of list" :key="item">{{ item }}</p>

<!-- 렌더링 결과 (list: ["A", "B", "C", "D"]) -->
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
v-on : 이벤트 처리를 하는 용도로 사용합니다.
html
      <button v-on:click="func">{{ isClick }}</button>

<!--
data() {
	return {
		isClick: false,
	}
},
func() {
	this.isClick = !this.isClick;
}
-->

<!-- 렌더링 결과 (클릭 전)-->
<button>false</button>

<!-- 렌더링 결과 (클릭 시)-->
<button>true</button>
v-bind : Vue의 데이터를 원하는 속성에 원하는 속성값을 넣을 수 있습니다.
html
      <a v-bind:[attr]="href">링크 글</a>

<!-- 렌더링 결과 (attr: "href", href: "https://naver.com") -->
<a href="https://naver.com">링크 글</a>
v-model : form의 값들을 양방향 바인딩해줍니다. 즉 input의 값과 데이터 값이 동기화됩니다.
html
      <input v-model="val" />

<!-- 렌더링 결과 (val: "text") -->
<input /> <!-- text 값이 들어있다. -->
v-slot : 하위 컴포넌트의 값을 이용해 렌더링하거나 하위 컴포넌트 특정 영역의 DOM을 상위에서 정할 수 있습니다.
vue
ChildComp.vue
      <header>
	<slot name="header"></slot>
</header>
vue
ParentComp.vue
      <ChildComp>
  <template v-slot:header>
    <p>Hi</p>
  </template>
</ChildComp>

<!-- 렌더링 결과 -->
<header>
  <p>Hi</p>
</header>
v-pre : Vue로 컴파일 하지 않고 {{ }} 에 상관없이 렌더링합니다.
html
      <p v-pre>{{ text }}</p>

<!-- 렌더링 결과 -->
<p>{{ text }}</p>
v-cloak : Vue가 컴파일 되기전에 나타나는 {{ }} 를 숨겨주다가 끝나면 보여줍니다.
html
      <p v-cloak>{{ text }}</p>

<!-- 렌더링 결과 (text: "hello") -->
<p>hello</p>
v-once : 한 번 렌더링하면 이후 데이터가 바뀌더라도 DOM을 렌더링하지 않습니다.
html
      <p v-once>{{ text }}</p>

<!-- 렌더링 결과 (text: "hello") -->
<p>hello</p> 

<!-- text값이 중간에 바뀐 렌더링 결과 (text: "bye") -->
<p>hello</p>
v-memo : v-memo에 들어있는 값이 업데이트 될 때만 다시 렌더링 해줍니다.
html
      <button v-on:click="count++">{{ count }}</button>
<button v-on:click="update = !update">update</button>

<p v-memo="[update]">{{ count }}</p>

<!-- count : 0, update : false -->

<!-- 렌더링 결과 (클릭 전) -->
<button>0</button>
<button>false</button>

<p>0</p>

<!-- count 클릭 -->
<button>1</button>
<button>false</button>

<p>0</p>

<!-- update 클릭 -->
<button>1</button>
<button>true</button>

<p>1</p>

커스텀 디렉티브

Vue에서 제공하는 기본적인 디렉티브 뿐만 아니라 특정 기능을 수행하는 커스텀 디렉티브도 만들 수 있습니다.

html
      <태그 v-mydirective></태그>