v-cloak 实现vue实例未编译完前不显示
前言:
由于网速原因,(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实例未编译完前不显示的更多相关文章
- vue 实例未加载完成显示 花括号解决方案
css [v - cloak] { display: none!important; } html < div id = "app" v-cloak >
- system v消息队列demo(未编译)
#include <stdio.h> #include <string.h> #include <stdlib.h> #include <errno.h> ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue.js-07:第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue入门系列(五)Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- 浅谈 vue实例 和 vue组件
vue实例: import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ e ...
- Vue实例详解与生命周期
http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...
随机推荐
- HTML中重要的知识点,表单
今天跟大家分享一下有关HTML中比较重要的一个知识点-表单: <form></form>表单 这是一个双标签,form表单有两个必须要有的属性,①action就是指表单传递到的 ...
- Ionic 安装创建项目
在安装了node+Cordova的情况下(过程参考我之前的文章Phonegap环境配置),安装ionic: 安装ionic npm install -g ionic Android创建安装: npm ...
- HDOJ2007-平方和与立方和
Problem Description 给定一段连续的整数,求出他们中所有偶数的平方和以及所有奇数的立方和. Input 输入数据包含多组测试实例,每组测试实例包含一行,由两个整数m和n组成. ...
- C++ 之 Asio 库
1 简介 Asio 是一个跨平台的 C++ 库,常用于网络编程.底层的 I/O 编程等 (low-level I/O),其结构框架如下: 2 使用 Asio 2.1 下载 Asio 可分为 ...
- 性能测试——jmeter环境搭建,录制脚本,jmeter参数化CSV
一.Jmeter+jdk环境搭建 1.http://www.oracle.com/technetwork/java/javase/downloads/index.html,下载jdk. 直接安装就行了 ...
- 斗地主[NOIP2015]
题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据牌的数码表示如下:3<4< ...
- spring持久类po或者javabean为什么常常实现序列化?
无论用hibernate或者mybatis结合spring做开发还是其他,系统里持久类往往要实现序列化, implements Serializable.我还是比较好奇,为什么要这样做呢?一直只知道个 ...
- Web Animations API (JS动画利器)
原文地址:→传送门 写在前面 之前学习了CSS animation/setTimeout/setInterval/requestAnimationFrame等,这些都可以用在某种场景下的小动画,也可以 ...
- Java 架构师之路(2)
一.技术 J2EE技术是架构师的基础.1.<Java编程思想> 初学Java时阅读这本书觉得好难,阅读第二遍时才觉得讲的很细致.这是一本不怕多读的好书. 2.<J2EE应用与BEA ...
- Cordova + idea 环境搭建
1.安装前期工作 1).安装Node.js http://nodejs.cn/download/ 里面内置了npm,可以用来安装 Cordova,把该路径添加到环境变量,这样就可以在 cmd 里面任何 ...