Comment empêcher le chargement de la page Vue de scintiller

Cette fois, je vais vous expliquer comment empêcher le chargement de la page Vue de scintiller, et quelles sont les précautions à prendre pour empêcher le chargement de la page Vue de scintiller. Voici un cas pratique, jetons un coup d'œil.

La différence entre v-if et v-show

v-if ne sera compilé que lorsque les conditions sont remplies, tandis que v-show Il sera toujours compilé, que les conditions soient remplies ou non. L'affichage et le masquage de v-show ne sont qu'un simple changement de l'attribut display de CSS.

En d'autres termes, lors de l'utilisation de v-if, si la valeur est fausse, alors la page ne générera pas cette balise html. Et v-show : que sa valeur soit fausse ou vraie, l'élément html existera, il suffit de changer simplement l'attribut display du CSS.

Scénarios d'utilisation

De manière générale, v-if a un coût de commutation plus élevé et v-show a un coût de rendu initial plus élevé. Par conséquent, v-show est préférable si vous devez changer fréquemment, et v-if est meilleur s'il est peu probable que les conditions changent au moment de l'exécution.

De plus

1. La directive v-if peut être appliquée aux éléments d'emballage des modèles, mais v-show ne prend pas en charge les modèles

2. Lors de l'application de v-show à un composant, il y aura un problème à cause de la priorité de l'instruction v-else La solution est de remplacer v-else par un autre v-show

 // 错误
  <custom-component v-show="condition"></custom-component>
  <p v-else>这可能也是一个组件</p>
     // 正确做法
  <custom-component v-show="condition"></custom-component>
  <p v-show="!condition">这可能也是一个组件</p>

Pour résoudre le problème du crash de {{message}} lors du chargement de la page vue

Méthode 1 : v-cloak

v-cloak Lorsqu'elle est utilisée avec une règle CSS telle que [v-cloak]{display:none}, cette directive masque les balises Moustache non compilées jusqu'à ce que l'instance soit prête.

La commande v-cloak peut lier un ensemble de styles CSS comme un sélecteur CSS, et cet ensemble de styles CSS prendra effet jusqu'à ce que l'instance soit compilée.

  eg:
    // <p> 不会显示，直到编译结束。
    [v-cloak]{
      display:none;
        }
    <p v-cloak>
       {{ message }}
    </p>

Méthode 2 : v-text

En vue, nous allons mettre les données entre deux accolades puis les mettre en HTML, mais en vue En interne, toutes les doubles parenthèses sont compilées dans une directive v-text de textNode.

L'avantage d'utiliser le v-text est toujours de meilleures performances, et plus important encore, cela permet d'éviter le FOUC (Flash of Uncompiled Content), qui est le problème rencontré ci-dessus.

eg:
  <span v-text="message"></span>
  <!-- same as -->
  <span>{{message}}</span>

Supplément :

Composant de barre de progression du chargement de la page Vue

Progression du chargement de la page J'ai vu l'article pour la première fois sur YouTube, et plus tard, il peut être vu sur presque tous les principaux sites Web. Il peut empêcher les utilisateurs de regarder une page complètement vide lors du chargement de la page, améliorant ainsi l'expérience utilisateur

Mais à partir d'un développement. D'un point de vue, il est vraiment difficile de saisir l'authenticité de ce type de barre de progression, car on ne peut pas compter la progression jusqu'à ce que le code logique soit chargé, et la progression du code logique lui-même ne peut pas être comptée. De plus, il nous est impossible de surveiller le chargement de toutes les ressources.

En fait, les utilisateurs ne se soucient pas du pourcentage de votre page qui est chargé, mais ce qui les intéresse vraiment, c'est le temps qu'il faut avant qu'elle soit complètement chargée, et si la page vierge n'a pas été complètement chargée ou est vide après son chargement. Nous n'avons donc pas besoin de "simuler" une barre de progression, d'utiliser un faux effet d'animation pour simuler le chargement avant le retour des données back-end, de lire la barre de progression et de la masquer après le retour des données.

// progress-bar.vue
<template>
 <transition name="fade">
  <p class="progress-bar" v-if="isShow">
  </p>
 </transition>
</template>
<script type="text/babel">
 export default {
  data() {
   return {
    isShow: true, // 是否显示进度条
    val: 0, // 进度
   }
  },
  props: {
   /**
    * 每10毫秒自增幅度
    */
   step: {
    type: Number,
    default: 5,
   },
   /**
    * 初始值
    */
   initVal: {
    type: Number,
    default: 0,
   },
   /**
    * 到一定进度停止
    */
   stopVal: {
    type: Number,
    default: 80,
   },
   /**
    * 进度条继续到成功
    */
   isOk: {
    type: Boolean,
    default: false,
   },
  },
  mounted() {
   // 初始化后加载进度，加载到百分之多少由stopVal决定
   this.val = this.initVal
   let step = this.step
   let timer = setInterval(() => {
    this.val = this.val + step
    this.$el.style.width = this.val + '%'
    // 父组件数据加载完前进度条最多到stopVal的这个百分值
    if (this.val >= this.stopVal) {
     clearInterval(timer)
     return
    }
   }, 10)
  },
  watch: {
   /**
    * 监听组件props变化决定是否继续加载，一般在父组件数据加载完后改变此标志位
    */
   isOk() {
    let val = this.val
    let step = this.step
    let timer = setInterval(() => {
     val = val + step
     this.$el.style.width = val + '%'
     // 加载到百分百完成
     if (val >= 100) {
      // 关闭定时器
      clearInterval(timer)
      // 加载完成关闭进度条
      this.isShow = false
      // 加载完成的回调
      this.$emit('callback', 'load success')
      return
     }
    }, 10)
   },
  },
 }
</script>
<style lang="stylus" rel="stylesheet/stylus">
 .progress-bar {
  position fixed
  top 0
  height 6px
  width 0
  background-color #999
 }
 .fade {
  &-enter-active, &-leave-active {
   transition: all .3s
  }
  &-enter, &-leave-active {
   opacity: 0
  }
 }
</style>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment transmettre un tableau au contrôleur d'arrière-plan

Utiliser JS pour recevoir List paramètres de collecte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!