vue中的v-cloak
问题
在使用vue时,HTML 绑定 Vue实例,在页面加载时会闪烁类似{{msg}}
这样的信息。可能会导致用户体验不好。
使用v-cloak
v-cloak就能解决这个问题。
(1)用法
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
我们可以在 css 中加上:
[v-cloak] {
display: none;
}
然后在 html 中的加载点加上 v-cloak
,就可以解决这一问题:
<div id="app" v-cloak>
{{msg}}
</div>
(2)Vue1.x 与 Vue2 中 v-cloak 的不同
Vue1 中,允许将 Vue 实例挂载在 body 上,而 Vue2 是不允许的,想对整个页面实例化,需要另外用一个 div 来容纳整个页面内容,对其进行实例化。
这样在使用 v-cloak
时,同样需要用到这种方法。
(3)为什么我用的 v-cloak 无效?
在实际项目中,我们常通过 @import
来加载 css 文件
@import "style.css"
@import "index.css"
而 @import
是在页面 DOM 完全载入后才会进行加载,如果我们将 [v-cloak]
写在 @import
加载的 css 文件中,就会导致页面仍旧闪烁。
为了避免这种情况,我们可以将[v-cloak]
写在 link 引入的 css 中,或者写一个内联 css 样式,这样就得到了解决。
vue中的v-cloak的更多相关文章
- vue中的vue-cli
在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...
- Vue学习笔记七:Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- vue 中 直接操作 cookie 及 如何使用工具 js-cookie
转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...
- vue中的filters的用法
1.效果 金额保留两位小数,并加上单位元 2.index.html <!DOCTYPE html> <html lang="en"> <head> ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
- vue中$watch源码阅读笔记
项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单 ...
- 025——VUE中事件的基本使用与VUE中差异
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 024——VUE中filter的使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 023——VUE中数据排序sort() / 数据反转 reverse() 的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 022——VUE中remove()方法的使用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- webpack学习笔记--配置module
Module module 配置如何处理模块. 配置 Loader rules 配置模块的读取和解析规则,通常用来配置 Loader.其类型是一个数组,数组里每一项都描述了如何去处理部分文件. 配置 ...
- constructor与prototype
在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下: 我们都知道,在JS中有一个function的东西.一般人们 ...
- C# 之 反射性能优化3
阅读目录 开始 用Delegate优化反射的缺点 用Delegate优化反射的优点 用CodeDOM优化反射的优点 如何用好CodeDOM? 用CodeDOM优化反射的缺点 能不能不使用委托? 根据反 ...
- 如何配置使用HTML在线编辑工具
如何配置使用HTML在线编辑工具 为了更好的.统一的编写统一简单易用的博客,决定采用TinyMCE工具.首先下载TinyMCE4.0包.文件目录如下: 其中, Plugins是插件目录,包括各种插件 ...
- Python_tuple部分功能介绍
x.count():元素在元组内的个数 x.index():元素在元组内的位置
- Python图表数据可视化Seaborn:2. 分类数据可视化-分类散点图|分布图(箱型图|小提琴图|LV图表)|统计图(柱状图|折线图)
1. 分类数据可视化 - 分类散点图 stripplot( ) / swarmplot( ) sns.stripplot(x="day",y="total_bill&qu ...
- scrapy response.xpath可以提取包含字符XX的标签
1. 筛选属性包含某字符串的标签(如id = 'bigbaong' 查询包含'big'字符的就可以筛选到) res = response.xpath("//a[contains(@id, ...
- Hdu-1098解题报告
Hdu-1098解题报告 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1098 题意:已知存在一个等式f(x)=5*x^13+13*x^5+k*a*x ...
- HDU 2888 Check Corners (模板题)【二维RMQ】
<题目链接> <转载于 >>> > 题目大意: 给出一个N*M的矩阵,并且给出该矩阵上每个点对应的值,再进行Q次询问,每次询问给出代询问子矩阵的左上顶点和右下 ...
- Linux系统开发之路-中
4.Linux的安装(Windows环境下): 1)Windows环境需要借助虚拟机来安装Linux系统,这个推荐使用的软件是VMWare,官网能下载到的最新版本是Workstation Pro15. ...