はじめに
コンパイル完了後にページを表示することで、不完全なWebページをユーザーに見せないようにする方法です。
Vue.jsでv-cloakディレクティブを活用していきます。
環境
- OS: macOS Catalina 10.15.1
- zsh: 5.7.1
- Vue: 2.6.10
結論：コード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak> # ここにv-cloak
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
style.css
[v-cloak] {
display: none;
}
main.js
var app = new Vue({
el: '#app',
data: {
message: "This is v-cloak directive."
}
})
補足：v-cloakとは？
公式ドキュメントによると、
このディレクティブは関連付けられた Vue インスタンスのコンパイルが終了するまでの間残存します。
とのこと。
コンパイルが終了するまでの間残存する
↓
コンパイルが終了すると消えてくれる
↓
display: none;が消えて描画されるようになるということですね
※今回のコードで、もしv-cloakを使わなかったら、{{ message }}というMustacheがコンパイル前の不完全な状態で一瞬表示されてしまうことになります。
アレンジ：コンパイル後ふぁっと表示させる
CSSを少しいじって、コンパイル後にフェードインで表示するようにしたコードです。
index.html(変更なし)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Title</title>
</head>
<body>
<div id="app" v-cloak>
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
style.css
@keyframes cloak-in {
0% { opacity: 0; }
}
#app {
animation: cloak-in 1s;
}
[v-cloak] {
opacity: 0;
}
main.js
var app = new Vue({
el: '#app',
data: {
message: "FADE IN..."
}
})
おわりに
最後まで読んで頂きありがとうございました
これまで中途半端な状態を見せたくない要素にはCSSで時間を数秒遅らせて表示するようにしていました。
v-cloakを使ってコンパイル完了後というタイミングを指定出来れば、ユーザーの通信速度や端末のスペックに応じて表示されて便利ですね