18. built-in directives v-cloak

<template> <div class="example" v-cloak> {{fullName()}} </div> </template> <script setup> import {ref} from 'vue'; const firstname = ref('hyungju'); const lastname = ref('lee') const fullName = () => `${firstname.value}-${lastname.value}` </script> <style> </style>

위와 같이 모듈번들러를 사용한 프로젝트에선 v-cloak 사용할 필요가 없다.

html 파일에 직접 cdn으로 vue를 불러와 작업할 때 필요한 directive이다.

• v-cloak

v-cloak 특징

• v-cloak은 연결된 컴포넌트 인스턴스가 마운트될 때까지 엘리먼트에 남아 있습니다.
• [v-cloak] { display: none }과 같은 CSS 규칙과 결합하여, 컴포넌트가 준비될 때까지 템플릿을 숨기는 데 사용할 수 있습니다.

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

<div>는 컴파일이 완료될 때까지 표시되지 않습니다.