Graceful Light

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

2017-11-08


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

해결

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

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

더 멋진 방법

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

1
2
[v-cloak] > * { display:none; }
[v-cloak]::before { content: "loading..." }
Tags: vue
🍺

Buy me a beer 🍗

공유하려면 QR코드를 스캔해주세요