前言:

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

看截图:

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

v-cloak

用法:

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

示例:

  1. [v-cloak] {
  2. display:none;
  3. }
  1. <div v-cloak>
  2. {{ message }}
  3. </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. HTML中重要的知识点,表单

    今天跟大家分享一下有关HTML中比较重要的一个知识点-表单: <form></form>表单 这是一个双标签,form表单有两个必须要有的属性,①action就是指表单传递到的 ...

  2. Ionic 安装创建项目

    在安装了node+Cordova的情况下(过程参考我之前的文章Phonegap环境配置),安装ionic: 安装ionic npm install -g ionic Android创建安装: npm ...

  3. HDOJ2007-平方和与立方和

    Problem Description 给定一段连续的整数,求出他们中所有偶数的平方和以及所有奇数的立方和.   Input 输入数据包含多组测试实例,每组测试实例包含一行,由两个整数m和n组成.   ...

  4. C++ 之 Asio 库

    1  简介  Asio 是一个跨平台的 C++ 库,常用于网络编程.底层的 I/O 编程等 (low-level I/O),其结构框架如下: 2  使用 Asio 2.1  下载  Asio 可分为 ...

  5. 性能测试——jmeter环境搭建,录制脚本,jmeter参数化CSV

    一.Jmeter+jdk环境搭建 1.http://www.oracle.com/technetwork/java/javase/downloads/index.html,下载jdk. 直接安装就行了 ...

  6. 斗地主[NOIP2015]

    题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据牌的数码表示如下:3<4< ...

  7. spring持久类po或者javabean为什么常常实现序列化?

    无论用hibernate或者mybatis结合spring做开发还是其他,系统里持久类往往要实现序列化, implements Serializable.我还是比较好奇,为什么要这样做呢?一直只知道个 ...

  8. Web Animations API (JS动画利器)

    原文地址:→传送门 写在前面 之前学习了CSS animation/setTimeout/setInterval/requestAnimationFrame等,这些都可以用在某种场景下的小动画,也可以 ...

  9. Java 架构师之路(2)

    一.技术 J2EE技术是架构师的基础.1.<Java编程思想> 初学Java时阅读这本书觉得好难,阅读第二遍时才觉得讲的很细致.这是一本不怕多读的好书. 2.<J2EE应用与BEA ...

  10. Cordova + idea 环境搭建

    1.安装前期工作 1).安装Node.js http://nodejs.cn/download/ 里面内置了npm,可以用来安装 Cordova,把该路径添加到环境变量,这样就可以在 cmd 里面任何 ...