前言:

由于网速原因,(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. javascript中this的用法

    this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, function test(){ this.x = 1; } 随着函数使用场合的 ...

  2. C++ 之 Asio 库

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

  3. 小程序server-实现会话层

    小程序server-实现会话层开发教程: 1.安装MongoDB #安装 MongoDB及其客户端命令行工具 yum install mongodb-server mongodb -y #查看版本 m ...

  4. C++ STL 栈和队列详解

    一.解释: 1.栈 栈是一种特殊的线性表.其特殊性在于限定插入和删除数据元素的操作只能在线性表的一端进行.如下所示: 结论:后进先出(Last In First Out),简称为LIFO线性表. 举个 ...

  5. 前端开发之css篇

    一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作 二.c ...

  6. git分支管理之分支管理策略

    分支管理策略 阅读: 246888 通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就 ...

  7. java大数常用的方法

    创建大数对象: BigInteger a=new BigInteger("123"); BigInteger a=BigInteger.valueOf(); 常用方法: multi ...

  8. mysql获取当前时间,前一天,后一天

    负责的项目中,使用的是mysql数据库,页面上要显示当天所注册人数的数量,获取当前的年月日,我使用的是 CURDATE(), 错误的sql语句 eg:SELECT COUNT(*) FROM USER ...

  9. Hadoop分布式集群搭建hadoop2.6+Ubuntu16.04

    前段时间搭建Hadoop分布式集群,踩了不少坑,网上很多资料都写得不够详细,对于新手来说搭建起来会遇到很多问题.以下是自己根据搭建Hadoop分布式集群的经验希望给新手一些帮助.当然,建议先把HDFS ...

  10. python第一篇-------python介绍

    一.python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写Python语言的编译器.Python这个名字,来自Guido所 ...