【vue.js】v-cloakを使ってアクセス直後のマスタッシュを表示させない
vue.jsのページにアクセスすると一瞬画面上にマスタッシュ{{ message }}(ダブルカーリーブレース)が表示されます。マスタッシュが一瞬ページに表示されるのは閲覧するユーザにとってあまりいいものではありません。そのためvue.jsにはv-cloakディレクティブが準備されており、HTMLの要素にv-cloakを設定することでアクセス時のマスタッシュを表示させないように設定することができます。
v-cloakの設定方法
人によってはマスタッシュが表示されるということがどういう意味なのかわからない人もいるかもしれません。最初にマスタッシュが表示されるとはどのようなものかを確認してv-cloakの設定方法を確認します。
マスタッシュが表示されるとは
h1タグにVueインスタンスのデータプロパティmessageを表示させるindex.htmlファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>v-cloak</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'v-cloakの設定',
}
})
</script>
</body>
</html>
ブラウザでindex.htmlファイルを開くと一瞬画面上に下記のように{{ message }}が表示されるのを確認することができます。表示されるのは非常に短い時間のでどのようなものが表示されるかまでわからない場合もあります。
マスタッシュは一瞬ブラウザ上に表示されるだけなので、すぐにmessageの値である”v-cloakの設定”がブラウザ上に表示されます。
マスタッシュ見えましたか？マスタッシュが表示されるということが確認できたのでv-cloakの設定を行います。
v-cloakの設定
v-cloakディレクティブは要素ごとに設定を行うことができ、Vueのインスタンスの作成が完了が終わるまで要素上に存在するディレクティブです。
Vueインスタンスの作成中には要素に属性としてv-cloakディレクティブが設定された状態となり、インスタンス作成が完了すると要素から消えます。
v-cloakを要素に設定すればいいだけというものではなくCSSと組み合わせる必要があります。v-cloakをdiv要素(id=”app”でvue.jsのマウントポイント)に追加し、styleタグの中でv-cloakのCSS設定を行います。インラインで設定した場合には効果がないので注意してください。
<head>
<meta charset="UTF-8">
<title>v-cloak</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
タグへのv-cloakの追加とCSSの設定を適切に行うとブラウザでindex.htmlファイルを開いても先ほどまで一瞬表示されていたマスタッシュ{{ }}が表示されることはありません。
vue.jsのマウントポイントである<div id=”app”>タグにv-cloakを追加しましたが下記のように一部のタグのみv-cloakを設定してみます。
<div id="app">
<h1 v-cloak>{{ message }}</h1>
<h1 v-cloak>{{ message }}</h1>
<h1>{{ message }}</h1>
</div>
仕様通りv-cloakは要素ごとに設定を行うことができるので、設定を行わなかったh1タグのマスタッシュのみアクセス直後に一瞬だけ画面に表示されます。
v-cloakを設定すればアクセス直後のマスタッシュの表示を抑えることができることがわかりました。
