v-cloakがvueにロードされたときのちらつきに対処する方法

今回は、vue でロードするときに v-cloak がちらつく場合の対処方法を紹介します。 vue でロードするときに v-cloak がちらつく場合の注意点は次のとおりです。

vue を使用してデータをバインドすると、ページのレンダリング時に変数が点滅します。たとえば、

<p class="#app">
  <p>{{value.name}}</p>
</p>

の読み込み時にページに

{{value.name}}

が表示され、データは数秒後にレンダリングされます。 vue には、この問題を解決できるコマンド v-cloak があります

それでは、このコマンドは、データをレンダリングする必要があるすべてのタグに追加する必要がありますか?全てのタグに追加する必要はなく、elでマウントされたタグ

<p class="#app" v-cloak>
  <p>{{value.name}}</p>
</p>

に追加するだけです。また、ページのちらつきを防ぐためにCSSに

[v-cloak] {
  display: none;
}

を追加する必要があります。

しかし、場合によっては機能しないことがあります。考えられる理由は 2 つあります:

1. v-cloak の表示属性がより高いレベルで上書きされるため、レベルを上げる必要があります

[v-cloak] {
  display: none !important;
}

2。 in @import で導入された css ファイルでは、この v-cloak のスタイルは @import で導入された css ファイルに配置すると機能しません

追加:

使用法:

このディレクティブは、関連付けられたインスタンスが作成されるまで要素に残ります。コンパイルを終了します。 [v-cloak] { display: none } などの CSS ルールとともにこのディレクティブを使用すると、インスタンスの準備ができるまで、コンパイルされていない Mustache タグを非表示にすることができます。公式 API

<p id="app">
  {{msg}}
</p>

HTML は Vue インスタンスにバインドされており、ページが読み込まれると

が点滅し、効果をより明確にするために、読み込みを遅らせることができます。 Vue インスタンス

setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
},2000)

v-cloak を使用すると、CSS に

[v-cloak] {
 display: none;
}

を追加し、HTML の読み込みポイントに v-cloak を追加すると、この問題を解決できます

<p id="app" v-cloak>
  {{msg}}
</p>

Vue1 では、Vue インスタンスはボディにマウントされますが、Vue2 では許可されていません。ページ全体をインスタンス化したい場合は、ページ全体を収容するために追加の p を使用する必要があります。ページのコンテンツを作成してインスタンス化します

このように、v-cloak を使用する場合は、次のことも必要になります。 この方法を使用する

実際のプロジェクトでは、@import

@import "style.css"
@import "index.css"

を通してCSSファイルを読み込むことが多いのですが、@importはページDOMが完全に読み込まれるまで読み込まれません。 @importに[v-cloak]と書くと読み込まれます。 css ファイルを使用しても、ページがちらつく原因になります。

この状況を回避するには、リンクで紹介されているCSSに[v-cloak]を記述するか、インラインCSSスタイルを記述することで問題が解決します。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がv-cloakがvueにロードされたときのちらつきに対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。