Vue multi page app에서 코드가 미리보이는 현상 제거
· 약 1분
뷰에 데이터가 바인딩 되기전 {{태그}}
구문이 보일 때 다음과 같이 하면 된다.
해결
v-cloak api에 자세하게 나와있다.
<!-- vue가 바인딩 될 영역에 v-cloak attribute를 추가한다 -->
<div id="vue_area" v-cloak></div>
[v-cloak] {
display: none;
}
더 멋진 방법
로딩시에 content 영역에 loading...이라는 문구를 찍어주는 방법으로 여기에 자세히 설명되어있다.
[v-cloak] > * {
display: none;
}
[v-cloak]::before {
content: "loading...";
}