hotamul의 개발 이야기

[hotamul] v-cloak 본문

project/share-blog

[hotamul] v-cloak

hotamul 2022. 9. 8. 00:22

Vue.js가 처리되기 이 전 화면에는 {{ }}와 같은 mustach 표현이나 v-if로 감춘 내용들이 아주 잠깐 동안 보이게 된다.
그 이유는 브라우저에서 페이지가 로드된 뒤에 Vue.js를 실행하면서 엔진이 Javascript를 읽어 들이는데 시간이 필요하기 때문이다. 렌더링 되기 이 전 까지의 아주 잠깐이지만 보이면 안되는 중요한 내용이 보일 수 있기 때문에 이를 v-cloak으로 해결해보겠다.

 

v-cloak 디렉티브는 Vue.js에서 사용되는 내장 디렉티브로 Vue.js가 렌더링 되기 전까지는 남아있는 속성이다. 그리고 Vue.js가 모두 처리되고 나면 v-cloak 속성을 삭제한다. 따라서 아래와 같이 태그에 v-cloak 디렉티브를 추가하고 display: none; css를 추가하면 렌더링이 되기 전까지 화면에 아무것도 보이지 않게 된다.

 

...
<style>
[v-cloak] {
    display: none;
}
</style>
...
<body>
    <div id="page-top" v-cloak>
...

'project > share-blog' 카테고리의 다른 글

[hotamul] 태그 제거되는 버그 수정  (0) 2022.09.20
[hotamul] Django 실행 시 sqlite3 버전 이슈  (0) 2022.09.16
[hotamul] EC2에서 Python3.8 설치 및 버전 변경  (0) 2022.09.16
[hotamul] github 댓글 기능 (utterances, Vue.js)  (0) 2022.09.09
[hotamul] Django request 횟수 줄이기 (+Vue.js)  (0) 2022.09.07
'project/share-blog' Related Articles more
Comments