vue で v-cloak を使用して、更新またはロード時に点滅する問題を解決する方法

今回は、vue で v-cloak を使用して、更新時またはロード時にちらつく問題を解決する方法を説明します。以下は実際のケースです。

<p>
  </p><p>{{value.name}}</p>

ロード時にページに

{{value.name}} が表示されますが、データは数秒後にレンダリングされます。この問題を解決するための vue の命令があります。v-cloak

次に、v -cloak この命令は、データをレンダリングする必要があるすべてのラベルに追加する必要がありますか? 実験の結果、v-cloak をすべてのラベルに追加する必要があるだけであることがわかりました。 el.

<p>
  </p><p>{{value.name}}</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>
  {{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>
  {{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 サイトの他の関連記事に注目してください。

推奨書籍:

Vue を使用してカウントダウン ボタンを実装する方法

Vue を使用して双方向データ バインディングを作成する方法

以上がvue で v-cloak を使用して、更新またはロード時に点滅する問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。