前言:

由于网速原因,(ps:之前同事无意间在网速很差的情况下测出的)在使用vue开发时,会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下,造成不好的用户体验。于是想起了可以通过v-cloak指令来隐藏未编译完成的Mustache标签。

看截图:

ps:在测试网速在较差的情况下页面的展示情况,可以通过chrome开发者工具的Network进行网速的限制,看截图:

v-cloak

用法:

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

示例:

[v-cloak] {
display:none;
}
<div v-cloak>
{{ message }}
</div>

不会显示,直到编译结束。

总结

通过使用v-cloak我们就可以很好的避免了vue实例还未编译完成之前不会显示Mustache标签了,但是这样还是存在一个问题,就是白屏状态,于是我们可以在v-cloak的兄弟节点通过css设置一个loading的动画,让用户知道页面还在加载。

看截图:

而vue实例的创建是在mounted状态时候完成的,于是我们可以通过data设置一个loading状态值,当实例编译完成后就调用mounted钩子修改修饰loading状态的值实现隐藏。这样我们就能在网速比较差的情况下也能给用户一个比较好的体验。

补充:

v-cloak无效的情况:

1.在实际项目开发中,挺多是通过import来加载css文件的,而import进来的样式文件是DOM载入后才引进来的,如果将[v-cloak]写在import进来的样式文件上仍会出现{{}}闪烁的问题,可以通过写在link标签引进来的css文件中或者设置内联样式。

2.还有的情况就是优先级的问题,[v-cloak]设置的样式被覆盖了,也可以通过暴力的手段,通过设置!important来提高优先级。

参考资料:

vue官网:https://cn.vuejs.org/v2/api/#v-cloak

v-cloak 实现vue实例未编译完前不显示的更多相关文章

  1. vue 实例未加载完成显示 花括号解决方案

    css [v - cloak] { display: none!important; } html < div id = "app" v-cloak >

  2. system v消息队列demo(未编译)

    #include <stdio.h> #include <string.h> #include <stdlib.h> #include <errno.h> ...

  3. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  4. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  5. Vue.js-07:第七章 - Vue 实例的生命周期

    一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...

  6. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  7. Vue入门系列(五)Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  8. 浅谈 vue实例 和 vue组件

    vue实例: import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ e ...

  9. Vue实例详解与生命周期

    http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...

随机推荐

  1. cloudstack下libvirtd服务无响应问题

    在cloudstack4.5.2版本下,偶尔出现libvirtd服务无响应的情况,导致virsh命令无法使用,同时伴随cloudstack master丢失该slave主机连接的情况.最初怀疑是lib ...

  2. Web测试与APP测试有哪些异同?

    1.相同点 不管是传统行业的web测试,还是新兴的手机APP测试,都离不开测试的基础知识,即是不管怎么变,测试的原理依然会融入在这两者当中. 1)设计测试用例时,依然都是依据边界值分析法.等价类划分等 ...

  3. Android学习笔记- ProgressBar(进度条)

    本节引言: 本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用 ...

  4. git相关的学习资料

    1, 一个比较详细的git使用说明: http://blog.jobbole.com/78960/

  5. React Native编译器的配置以及基础知识

    入职新公司,这边打算采用RN来写界面,所以学习一波这一块的知识. 采用的是WebStorm来编译,据同事说,比他采用atom编译要多很多语法提示. 下载地址:https://www.jetbrains ...

  6. vue指令v-bind示例解析

    1.绑定一个属性 <img id="app" v-bind:src="imageSrc"> <script> var app = Vue ...

  7. 算法竞赛入门经典 习题2-10 排列(permutation)

    习题2-10 排列(permutation) 用1,2,3,-,9组成3个三位数 abc, def, 和ghi,每个数字恰好使用一次,要求 abc:def:ghi = 1:2:3.输出所有解.提示:不 ...

  8. BaseAction 使用

    public class AreaAction extends BaseAction<Area> { @Autowired private AreaService areaService; ...

  9. 【机器学习笔记之六】Bagging 简述

    本文结构: 基本流程 有放回抽样的好处 Bagging 特点 sklearn 中 Bagging 使用 Bagging 和 Boosting 的区别 bagging:bootstrap aggrega ...

  10. Relationship between frequency domain and spatial domain in digital images

    今天又复习了一遍<<Digital Image Processing>>的第四章,为了加深对频域的理解,我自己用PS画了一张图.如下: 然后做FFT,得到频谱图如下: 从左到右 ...