[Vue.js] v-cloak

 

 

 v-cloak은 내장 디렉티브로 VueJS에서 렌더링 되기 이전에 브라우저에서 감추는 역할을 한다.

(여기서 감춘다는 뜻은 감추고 보여주는 역할의 v-if또는 v-show와는 다르다.)

 v-cloak의 동작방식 
 1) 브라우저에서 페이지 소스를 로딩
 2) VueJS프레임워크를 실행
 3) VuewJS처리 완료

 

 이 과정에서 VueJS가 처리되기 이전 화면세는 {{ }}표현식 또는 v-if등을 사용해 보여주지 않을 내용들이 그대로 노출된다. 이를 피하기 위해 v-cloak을 사용한다.

 

v-cloak을 사용해 감추는 방법

v-cloak을 엘리먼트에 적용하면 VueJS의 처리가 완료된 후에 v-cloak디렉티브를 스스로 제거한다.

태그에서는 v-cloak이라는 어트리뷰트를 제거하게된다. 그래서 v-cloak에 안보이도록 해주는 css인 display:none;을 추가하면 VueJS의 프로세스가 완료되기 전까지는 해당 엘리먼트가 화면에서 사용자에게 노출되지 않는다.

 

<div v-if="false" v-cloak>TEST</div>


[v-clock] {
  display: none;
}

 

 

v-cloak

API — Vue.js

• Does not expect expression
• Usage:
• This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.
• Example:

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

  The <div> will not be visible until the compilation is done.
• [v-cloak] { display: none; }

 

 

 

 

 

---

[참조]

 

https://webisfree.com/2019-02-10/[vuejs]-v-cloak-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EA%B0%90%EC%B6%94%EA%B8%B0 

[VueJS] v-cloak 사용하는 방법, 감추기

https://vuejs.org/v2/api/

API — Vue.js