【Vue.js】画面表示時のマスタッシュ構文の表示を無くそう！【v-cloak】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Vue.jsの解説シリーズです。

今回は画面表示時のマスタッシュ構文を非表示にするv-cloakの使い方について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

v-cloakを使いこなしてチラつきを無くそう！

画面表示時に一瞬マスタッシュ構文が出てくるのを防ごう！

聞き慣れない言葉かもしれないですが、Vue.jsをHTMLに反映させる際には
{{}} ⇠ で変数を囲いますよね？

この波括弧2つで囲った構文のことをマスタッシュ構文と言います。

Vue.jsを使って画面を作っていると、
画面をリロードした際に一瞬だけ{{myText}}のような
マスタッシュ構文が表示されてしまうことがあります。

これは一般的に画面のチラツキといい、
web製作を行う上で好ましくありません。

ここまで説明した、画面のちらつきを無くすためには、
v-cloakディレクティブを使います。

v-cloakの構文

<p v-cloak> {{ myText }} </p>

v-cloakの記述方法は上記のように
ちらつきをなくしたい部分に記述するだけです。

上記の記述でv-cloakディレクティブを反映させることはできましたが、
これだけでは未完成です。

マスタッシュ構文が表示されることによるチラツキをなくすには、
CSSで物理的に要素を非表示とする必要があります。

v-cloak用のCSSファイルの構文

[v-cloak] {
    display: none;
}

このように記述することで、v−cloakディレクティブが設定された要素を
物理的に非表示にすることが出来ます。

display:none; は要素を非表示にする記述だよ！

これまでの知識を組み合わせるとチラツキのない画面を作ることが出来ます。

やることは以下です

See the Pen v-cloak by samehack (@samehack) on CodePen.

Codepenで記述しているので、そもそもチラつかない可能性もありますが
ローカル環境で動かしていただければv-cloakの有無で
チラツキが無くなることが確認できると思います。

チラツキのないWeb画面を作れるようになってえらい！

ここからはオマケで、なんでチラツキがなくなったのかが
気になって仕方がないマニアックな方向けに簡単に解説します。

v-cloakディレクティブは、Vue.jsのインスタンスがコンパイルを完了するまで存在します。
=コンパイルが完了したら消える！ということです。

つまり・・・

ということになります。

v-cloakの仕組みが理解できてえらい！

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈