ポストカード・ビュー・プロジェクト プロジェクト番号

HTML：エレメントプラスVクローク

string result="10000";
int n=0;
stream<<result;
stream>>n;//n equals 10000

プロセス

ページが最初に読み込まれたときに、ひげの構文が表示されます。

assert n > 0, f"Positive number only, please." は、小さなVueJSプロジェクトでユーザーエクスペリエンスを向上させるためのシンプルかつ重要な方法です。

使用方法

点滅を整理するために必要なタグを含むHTML

v-cloak
<div id="app">  
 <nav>blabla</nav>  
 <main v-cloak>{{text}}</main>  
</div>

[v-cloak]{  
 display: none;  
}

CSSは、v-cloakのスタイルを設定します。これは、[vueインスタンスのコンパイルが終了する前]にのみ適用されるスタイルです。

v-cloak

プリンシプル

ソースコードに目を通したわけではありませんが v-cloak の原理が少しわかりました。

まずCSSのセレクタですが、[target]は"target属性を持つすべての要素を選択します." 。セレクタについては、ここでおさらいしておきましょう。

次に、[v-cloak] は、すべての要素の中から <main id="main" class="row" v-cloak=""> 属性があります。

インスタンスの初期化が完了すると、Vue固有の属性はVueJSから削除されます。インスタンスの初期化が完了するまでは、上に書いたmainのHTMLコードは、実際には以下のようになります。

display: block

次にCSSを追加すると、v-cloakを持つすべての要素を取り込みます。 [v-if]{display:none} を追加しました。

実はv-cloakだけでなく、v-ifでも試せるのですが、CSSが使っているのは v-cloak 効果は同じです。そして if (isRealElement) { // mounting to a real element // check if this is server-rendered content and if we can perform // a successful hydration. if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) { oldVnode.removeAttribute(SSR_ATTR); hydrating = true; } } v-ifと同様に、インスタンスがコンパイルされた後に削除されます。

ソースコード

それから、今、ソースコードを読みに行ったら、この段落くらいなので、興味のある方は検索して読んでみて理解してください。

if (isRealElement) {  
 // mounting to a real element  
 // check if this is server-rendered content and if we can perform  
 // a successful hydration.  
 if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {  
 oldVnode.removeAttribute(SSR_ATTR);  
 hydrating = true;  
 }  
}

今回は小さなプロジェクトでVueの画面点滅効果を防ぐ方法について紹介します、もっと関連する小さなプロジェクトVueの画面点滅の内容はBinaryDevelopの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください、今後ともBinaryDevelopを応援よろしくお願いします!