Vue multi page app에서 코드가 미리보이는 현상 제거

작성일 Edited on In , Disqus:
Symbols count in article: 372 Reading time ≈ 1 mins.

뷰에 데이터가 바인딩 되기전 {{태그}} 구문이 보일 때 다음과 같이 하면 된다.

해결

v-cloak api에 자세하게 나와있다.

1
2
<!-- vue가 바인딩 될 영역에 v-cloak attribute를 추가한다 -->
<div id="vue_area" v-cloak></div>
1
2
3
[v-cloak] {
  display: none;
}

더 멋진 방법

로딩시에 content 영역에 loading…이라는 문구를 찍어주는 방법으로
여기에 자세히 설명되어있다.

1
2
3
4
5
6
[v-cloak] > * {
  display: none;
}
[v-cloak]::before {
  content: 'loading...';
}