vue変数がフラッシュされるまでページのレンダリングを遅らせるには？

私はvue.jsを使っていくつかの結合変数を表示します。私のページの骨格がvue変数がフラッシュされるまでページのレンダリングを遅らせるには？

<body> 
<!-- the content of the page, including an instance of the variable {{hello}} --> 
<script src="vue.js"></script> 
<script src="myscript.js"></script> 
</body>

ページを開くことで、ページがすぐ後の変数helloの正しい値に置き換えられ{{hello}}を表示一瞬があります。

変数が初期化されてその値が表示されるまで、ページの表示を遅らせる正しい方法は何ですか？

私はそれがVue's asynchronous natureであると信じています（キューは最初のレンダリングが行われた時点ではまだフラッシュされていません）。しかし、私はこれを非表示にする方法を知っています。

出典

2017-04-03 WoJ

vueインスタンスはどこにマウントされていますか？ –

@AmreshVenugopal：それはすべての私のページを包含するコンテナ 'div'にマウントされています – WoJ

あなたはこのためv-cloakを使用することができ、続いては、これは使用されている方法です。

関連するVueのインスタンスは、コンパイルが終了するまで、このディレクティブは、要素の上に残ります。 [v-cloak] {display：none}のようなCSSルールと組み合わされて、この指示文は、Vueインスタンスが準備ができるまでコンパイルされていないひげ伏せの束縛を隠すために使用できます。

例： CSS：

[v-cloak] { 
    display: none; 
}

HTML：あなたが角度を知っていれば

<div v-cloak> 
    {{ message }} 
</div>

これは、ng-cloakに非常によく似ています。

出典

2017-04-03 12:25:56 Saurabh

ありがとう、これは私が探していたものです。私はそれを "container"の 'div'（私のVueインスタンスを定義する際に' el'として使うもの）に入れ、本当にひげそりバージョンを隠します。（+1、答えを受け入れるためにクールダウンを待っています） – WoJ

これは分かっていませんでしたが、/ {{ひどい}}は私には起こりませんでした。 –

@AmreshVenugopalこれらを防ぐためにv-ifチェックを入れているかもしれませんか？ – Saurabh

vue変数がフラッシュされるまでページのレンダリングを遅らせるには？

答えて

関連する問題