v-if 和 v-show 的区别
v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性。
也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成。而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性。
使用场景
一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
另外
1.v-if 指令可以应用于template包装元素上,而v-show不支持template
2.将v-show应用在组件上时,因为指令的优先级 v-else 会出现问题,解决办法就是用另一个 v-show 替换 v-else
1 2 3 4 5 6 | // 错误 <custom-component v-show= "condition" ></custom-component> <p v- else >这可能也是一个组件</p> // 正确做法 <custom-component v-show= "condition" ></custom-component> <p v-show= "!condition" >这可能也是一个组件</p> |
解决vue页面加载时出现{{message}}闪退
方法一:v-cloak
v-cloak指令和css规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。
?
1 2 3 4 5 6 7 8 | eg: // <div> 不会显示,直到编译结束。 [v-cloak]{ display:none; } <div v-cloak> {{ message }} </div> |
方法二:v-text
vue中我们会将数据包在两个大括号中,然后放到HTML里,但是在vue内部,所有的双括号会被编译成textNode的一个v-text指令。
而使用v-text的好处就是永远更好的性能,更重要的是可以避免FOUC (Flash of Uncompiled Content) ,也就是上面与遇到的问题。
1 2 3 4 | eg: <span v-text= "message" ></span> <!-- same as --> <span>{{message}}</span> |
补充:
vue 页面加载进度条组件
页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验
但是从开发角度讲,这种进度条在真实性上确实很难把握,因为在逻辑代码加载完成之前,我们都不能统计到进度,而逻辑代码自身的进度也无法统计。另外,我们不可能监控到所有资源的加载情况。
事实上,用户并不是在乎你的页面究竟加载了百分之几,而真正关心的是离加载完还有多久,以及这个空白页面是没有加载完,还是加载完就是空白的。所以没我们需要去“模拟”一个进度条,在后端数据返回前利用一个假的动画效果模拟加载,在数据返回后读完进度条并且隐藏。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | // progress-bar.vue <template> <transition name= "fade" > <div class= "progress-bar" v- if = "isShow" > </div> </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> |