5. directives v-cloak

first

최초 페이지 진입시 {{ fullName() }} 문자 노출 후 렌더링되는 문제가 있다.

이때 v-cloak 디렉티브를 활용하자.

이건 vuejs를 스크립트로 불러와서 사용할 때 유용한 디렉티브다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app" v-cloak>
    {{  fullName() }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

const vm = Vue.createApp({
    data() {
        return {
            firstName: 'John',
            lastName: 'Doe',
        }
    },
    methods: {
        fullName() {
            return `${this.firstName} ${this.lastName.toUpperCase()}`
        }
    }
}).mount('#app');

main.css

[v-cloak] {
    display: none;
}

# 5. directives v-cloak

# first

5. directives v-cloak

first