Cette fois, je vais vous montrer comment gérer le scintillement du chargement des pages Vue, et quelles sont les précautions pour gérer le clignotement du chargement des pages Vue. Ce qui suit est un cas pratique, prenons. un regard.
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 n'aura pas cette balise html générée. 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 le
sélecteur CSS et ensuite 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 utilisateurMais à 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>Comment utiliser les expressions EL en JS pour obtenir des paramètres de contexte
Comment utiliser JS pour effectuer un panoramique la liste de gauche Allez vers la droite
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!
Comment résoudre le problème que les CSS ne peuvent pas être chargés
Que faire si une erreur se produit dans le script de la page actuelle
Que faire si le CSS ne peut pas être chargé
Que faire si le chargement de la DLL échoue
Quel est le format du caj
Classement des plateformes de trading de cryptomonnaies
La différence entre concat et push dans JS
Comment accéder au lecteur D avec cmd
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
