[Vue.js] v-cloak : 렌더링 되기 전까지 숨김 처리하기

 

Vue로 구현하다 보면 렌더링이 완료되기 전에 {{ }}가 보이거나, v-if나 v-show로 처리한 요소들이 보이는 경우가 있다.

사내에서 확인할 때에는 크게 거슬릴 정도는 아니었는데,

속도가 좀 느린 환경에서 실행할 때에는 꽤 오래 보일 때가 있어서 해결 방법을 알아 보았다.

 

v-cloak을 지정하기 전

 

---

v-cloak

'v-cloak'은 Vue 처리가 완료되면 자동으로 삭제되는 디렉티브이다.

이를 활용하여, Vue.js에서 해당 요소가 렌더링되기 전까지 요소를 브라우저에서 감출 수 있다.

 

1. 스타일 설정

/* [ ] : 속성 선택자 */
/* 'v-cloak' 속성을 가진 요소에 해당 스타일을 적용함 */
[v-cloak] {
    /* 해당 요소를 숨김 */
    display: none;
}

 

2. 렌더링이 완료되기 전까지 숨길 태그에 v-cloak 디렉티브 설정

<div id="app" v-cloak>

 

 

---

 

v-cloak을 지정한 후