More than 3 years have passed since last update.

Vue.jsでjsファイル読み込み時に一瞬テンプレートのマスタッシュファイルが見えてしまう場合の対処法

Posted at 2020-12-01

html

<head>タグ配下に<style>タグを追加し、 [v-cloak] { opacity: 0; }を定義する。
コンポーネントを指定しているタグにv-cloakを付与する。

</head> 
    <meta charset="utf-8">
    <title>サンプル</title>
    <link rel="..." href="...">
    <style> 
        [v-cloak] { opacity: 0; } 
    </style> 
</head>
<body>
    <div id="test" v-cloak>
    ・・・省略・・・
    </div>
<body>

main.js

// コンポーネント
var app = new Vue({
    el : '#test' ,
    data : {}
　　・・・以下省力

解説

v-clockは要素が属するコンポーネントのデータ生成とデータバインディングが完了するとDOMから消去される。その性質を利用し、v-clockがついている間だけ、CSSで要素を非表示にすることでバインディング前の状態を隠すことができる。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up