Muscardinus

v-cloak 본문

FrontEnd/Vue

v-cloak

Muscardinus 2021. 12. 28. 01:56
728x90

인터넷이 느릴경우 우리는 불가피하게 expression을 들어내는 경우가 있다.

이럴 경우, 인터넷이 느린 지역에서 서비스에 접근했을때 expression만 보이는 불행한 사태가 벌어질 수 있다.

이를 방지하기 위해서, 우리는 v-cloak라는 directive를 사용할 수 있다.

 

<!DOCTYPE html>
<html>
  <head>
    <title>VueJS Course</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <div id="app" v-cloak>{{ fullName() }}</div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>

v-cloak라는 directive를 vue template에 넣고,

[v-cloak] {
  display: none;
}

해당, 속성에 대해서 display:none을 넣을 경우, vue instance가 실행되기 전까지, 안보였다가 실행이 완료되면 원하는 데이터가 보이게 할 수 있다.

728x90

'FrontEnd > Vue' 카테고리의 다른 글

v-bind  (0) 2021.12.28
v-model  (0) 2021.12.28
Method 사용  (0) 2021.12.28
data 받기  (0) 2021.12.17
Vue 실행  (0) 2021.12.17
'FrontEnd/Vue' Related Articles more
Comments