小規模プロジェクトで Vue の点滅する画面効果を防ぐ方法

一文の要約

HTML: 要素と v-cloak

CSS: [v-cloak]{表示: なし}

プロセス

ページが最初に読み込まれるときに、Beard 構文が表示されます。

v-cloak 、小規模な VueJS プロジェクトでのユーザー エクスペリエンスを向上させるためのシンプルかつ重要な方法です。

使用法

HTML で、点滅を整理するために必要なタグにv-cloak追加します。

<div id="アプリ">  
 <nav>ブラブラ</nav>  
 <main v-cloak>{{text}}</main>  
</div>

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

[v-マント]{  
 表示: なし。  
}

原理

まだソースコードを読み終わっていませんが、 v-cloakの原理は大体理解できました。

1 つ目は CSS セレクターで、[target] を使用すると「target 属性を持つすべての要素」が選択されます。ここでセレクターを確認できます。

次に、[v-cloak] はv-cloak属性を持つすべての要素を選択します。

インスタンスの初期化が完了すると、VueJS は Vue に固有の属性を削除します。インスタンスの初期化が完了する前、上記で記述されたメインの HTML コードは実際には次のようになります。

<main id="main" class="row" v-cloak="">

次に、 display: block 。

実際には、v-cloak だけではなく、CSS で[v-if]{display:none}を使用しても同様の効果が得られます。 v-cloakと同様に、 v-if もインスタンスのコンパイル後に削除されます。

ソースコード

次に、この段落に関するソース コードを読みます。興味のある人は検索して読んで理解してください。

if (isRealElement) {  
 // 実要素にマウントします  
 // これがサーバーでレンダリングされたコンテンツかどうか、および実行できるかどうかを確認します  
 // 水分補給が成功しました。  
 if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {  
 oldVnode.removeAttribute(SSR_ATTR);  
 水分補給 = true;  
 }  
}

小規模プロジェクトでの Vue の画面点滅効果を防ぐ方法に関するこの記事はこれで終わりです。小規模プロジェクトでの Vue の画面点滅に関するその他の関連コンテンツについては、downcodes.com で以前の記事を検索するか、引き続き次の関連記事を参照してください。今後さらに downcodes.com をサポートしていきます!