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

まとめ

HTML: 要素と v-cloak

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

プロセス

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

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

使用法

HTMLでは、フラッシュを防ぐために必要なタグにv-cloakを追加します。

<div id="アプリ">  
 <nav>ブラブラ</nav>  
 <メイン v-cloak>{{テキスト}}</メイン>  
</div>

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

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

原理

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

最初は CSS セレクタです。[target] は「target 属性を持つすべての要素」を選択します。セレクタを確認するには、ここをクリックしてください。

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

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

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

次に、CSS を追加して、 v-cloak を含むすべての要素をdisplay: block設定します。

実は、v-cloak だけではありません。v-if を使ってみることもできます。CSS で[v-if]{display:none}を使用すると、効果は同じになります。 v-cloakと同様に、 v-if もインスタンスがコンパイルされた後に削除されます。

ソースコード

それから、ソースコードを読みましたが、大体この段落のようです。興味のある方は検索して読んで理解してください。

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

小規模プロジェクトで Vue が点滅するのを防ぐ方法についての記事はこれで終わりです。小規模プロジェクトでの Vue の点滅に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後も 123WORDPRESS.COM をよろしくお願いいたします。