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

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

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

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

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

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

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

そもそもマスタッシュ構文とは？

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

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

マスタッシュ構文が出てくるって？？

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

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

v-cloakディレクティブを使ってチラツキを無くそう！

v-cloakディレクティブを使おう！

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

v-cloakの構文

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

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

CSSファイルの設定をしよう

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

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

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

[v-cloak] {
    display: none;
}

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

実際に動かしてみよう

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

やることは以下です

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

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

v-cloakディレクティブの仕組み

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

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

つまり・・・

ということになります。

まとめ

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

twitter
instagram