Vue.js 중괄호({{}}) 깜박임 없애는 방법
Vue.js 중괄호({{}}) 깜박임 없애는 방법
Vue CLI를 사용하지 않고 Vue.js를 그대로 사용하다 보면 템플릿으로 사용하는 중괄호”{{}}“가 처음 화면이 로딩 시 나타 났다가 사라지는 경우가 있다. 예민하지 않다면 크게 신경 쓰이지 않겠지만, 예민한 나로서는 신경이 쓰여 깜박임을 없애는 방법을 찾아 보았다.
방법은 Vue API에 나와있다.
Directives의 v-cloak을 사용하면 된다.
아래는 v-cloak의 간단한 내용이다.
This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.
사용방법
CSS
[v-cloak] {
display: none;
}
Javascript
<div v-cloak>
</div>