Vue.jsでデータを表示するとページが点滅する問題の解決方法

以下に、Vue.js を使用してデータを表示するときにページ上で元のコードが点滅する問題を解決する記事を共有します。これは良い参考値であり、皆様のお役に立てれば幸いです。

今日 Vue.js の使い方を学び始めましたが、学習プロセス中に問題を発見しました。それは、ページがデータをロードするときに元のコードがフラッシュするということです。すべての関係者からの情報を確認し、最終的な解決策を見つけます。

最初のステップ、CSS コードを追加します

<style type="text/css"> 
  [v-cloak] { 
    display: none; 
  } 
</style>

第 2 ステップ、ビューで CSS モジュールを参照します

<p id="app" v-cloak> 
  <h1>{{message}}</h1> 
  <h1>{{name}}</h1> 
</p>

一部の記事では、特定のデータに v- を追加するように記載されていることに注意してください部分的にクロークを作成する必要がありますが、すべてのデータ表示を追加する必要があるため、ビューモジュールを直接ロードすることで問題を解決できます。

3番目のステップ、js部分は変更されていません

<script type="text/javascript">   
  var exeData = { 
    message : "Hello World", 
    name:"我是Vue" 
  }; 
 
  new Vue({ 
    el : "#app", 
    data : exeData 
  }) 
</script>

完全なコードは以下に貼り付けられています:

 
 
 
 
 
<style type="text/css"> 
  [v-cloak] { 
    display: none; 
  } 
</style> 
 
 
   
  
 
    
{{message}}
 
    
{{name}}
 
  
 
 
 
 

上記は私が皆さんのためにコンパイルしたものです、お役に立てれば幸いです未来のみんなへ。

関連記事:

Webpackのホットデプロイメントでファイルの変更が検出されない問題を解決

Webpack開発サーバーでホットロードが失敗する問題

webpack-dev-serverにリモートアクセスを実装する 設定方法

以上がVue.jsでデータを表示するとページが点滅する問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。