So gehen Sie mit Flackern um, wenn die Vue-Seite geladen wird

Dieses Mal zeige ich Ihnen, wie Sie mit dem Flackern umgehen, wenn die Vue-Seite geladen wird. Welche Vorsichtsmaßnahmen sind zu beachten? Schauen Sie mal rein.

v-if wird nur kompiliert, wenn die Bedingung erfüllt ist, während v-show unabhängig davon immer kompiliert wird Die Bedingung ist erfüllt oder nicht. Nach der Kompilierung ist das Anzeigen und Ausblenden von v-show nur ein einfacher Wechsel des Anzeigeattributs von CSS.

Mit anderen Worten: Wenn bei Verwendung von v-if der Wert falsch ist, wird auf der Seite dieses

nicht generiert. Und v-show: Unabhängig davon, ob der Wert falsch oder wahr ist, ist das HTML-Element vorhanden. Wechseln Sie einfach das Anzeigeattribut von CSS.

Nutzungsszenarien Im Allgemeinen hat v-if höhere Wechselkosten und v-show hat höhere anfängliche Renderingkosten. Daher ist v-show besser, wenn Sie häufig wechseln müssen, und v-if ist besser, wenn sich die Bedingungen zur Laufzeit wahrscheinlich nicht ändern.

Zusätzlich 1. Die v-if-Direktive kann auf Vorlagenverpackungselemente angewendet werden, v-show unterstützt jedoch keine Vorlagen

2. Beim Anwenden von v-show auf eine Komponente tritt aufgrund der Priorität der Anweisung v-else ein Problem auf. Die Lösung besteht darin, v-else durch ein anderes 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>

Methode 1: V-Cloak

v-cloak-Befehl und Bei Verwendung zusammen mit CSS-Regeln wie [v-cloak]{display:none} kann diese Direktive unkompilierte Mustache-Tags ausblenden, bis die Instanz bereit ist. Der Befehl v-cloak kann einen Satz von CSS-Stilen wie den

binden und dieser Satz von CSS wird dann wirksam, bis die Instanz kompiliert ist.

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

In Vue werden wir die Daten in zwei geschweifte Klammern einschließen und sie dann in HTML einfügen, aber innerhalb von Vue sind es nur doppelte Klammern wird in eine V-Text-Direktive von textNode kompiliert.

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

Vue-Seitenlade-Fortschrittsbalkenkomponente

Seitenlade-Fortschrittsbalken anfänglich Ich habe es auf YouTube gesehen und es ist später auf fast allen großen Websites zu sehen. Es kann verhindern, dass Benutzer beim Laden der Seite auf eine völlig leere Seite starren, was das Benutzererlebnis verbessert

// 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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

Wie EL den Kontextparameterwert erhält (mit Code)

JS erstellt Links- und Rechtslisten gegenseitige Bewegungswirkung

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit Flackern um, wenn die Vue-Seite geladen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!