[Vue.js] 디렉티브(Directive) - (2)

 

두번째 포스팅은.. 내가 한번도 사용해 본적이 없는 Directive이기 때문에 직접 사용해보고 올리는 사용기이다.

v-slot은 설명을 읽어도 이해가되지않아서 이 포스팅이 굉장히 미뤄지고 있었는데, 직접 프로젝트를 구현해서 사용해보다 망치로 머리를 맞은 듯 깨달았다.

'그냥 컴포넌트로 쓰지 왜 슬롯을 쓰는거야?' 하다가 '슬롯 진짜 편하다!'로 끝난 여정이었다.

 

 

---

◽ v-slot

슬롯을 여러개 사용하는 경우 슬롯의 이름을 지정해주면 각각의 위치에 들어간다.

<template>
  <div class="c-prodlist-wrap">
    <slot name="title"></slot>
    <div class="prodlist">
      <c-prod
        v-for="item in prodlist"
        :key="item.prodcode"
        :prod="item"
      ></c-prod>
    </div>
    <slot name="more-btn"></slot>
  </div>
</template>

<template>
  <article class="newprod-wrap">
    <c-prodlist :isInfinite="false" :prodlist="rcmnProdlist">
      <div slot="title" class="title">
        <p class="subtitle">추천 신규 테마</p>
        <h3 class="maintitle">달력/다이어리</h3>
      </div>
      <button slot="more-btn" class="more-btn">더 보기</button>
    </c-prodlist>
  </article>
</template>

 

◽ v-pre
이 엘리먼트와 모든 하위 엘리먼트에 대한 컴파일을 건너 뛴다.

컴파일의 속도를 높이기 위해 사용한다.

<div v-pre>
	<p>{{ 이 곳은 컴파일을 건너 뛴다. }}</p>
</div>

 

◽ v-cloak
{ display: none }의 규칙이 적용된 디렉티브이다.

컴포넌트 인스턴스가 준비될 때 까지 컴파일 되지않은 {{ }} 모양의 바인딩을 숨긴다.

<div v-cloak>
	<!-- 이 부분은 컴파일이 완료될 때 까지 표시되지 않는다. -->
	{{ message }}
</div>

◽ v-once
엘리먼트와 컴포넌트를 한번(once)만 렌더링한다.
재렌더링 할 때는 해당 디렉티브가 붙은 엘리먼트/컴포넌트/하위 엘리먼트들은 정적 컨텐츠로 처리되고 건너 뛴다.
이걸 왜 쓸까? 업데이트 성능을 최적화 할 때 사용한다.

 

 

 

출처

https://vuejs.org/v2/api/#v-pre

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.