Vue で更新およびロードするときに v-cloak がちらつく場合の対処方法

今回は、Vue でリフレッシュ時とロード時に v-cloak が点滅する場合の対処方法を説明します。Vue でリフレッシュ時やロード時に v-cloak が点滅する場合の注意事項について説明します。ケースを見てみましょう。

vue を使用してデータをバインドすると、ページのレンダリング時に

変数 が点滅します。たとえば、

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

では、読み込み時に

{{value.name}}

がページに表示され、データは数秒経つまでレンダリングされません。秒。vue にはこの問題を解決できる命令があります。v-cloak

それでは、この命令をデータをレンダリングする必要があるすべてのタグに追加する必要があることがわかりました。その 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;
}

を増やす必要があります。配置 @import で導入した css ファイル内に配置すると v-cloak のこのスタイルは機能しません

リンクで導入した css ファイル内に配置することも可能です。

追加:

Vue での v-cloak の解釈を見てみましょう

v-cloak の役割と使用法

使用法: このディレクティブは、関連付けられたインスタンスが作成されるまで要素に残りますコンパイルを終了します。 [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 の v-cloak の違い.x と Vue2

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

私が使用している v-cloak が機能しないのはなぜですか?

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

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

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

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

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

推奨読書:

ツリー構造を実装するためのJSデコレータ関数の使用の詳細な説明

vue.js+element-ui

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