v-cloak 的作用和用法

用法:

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

<div id="app">
{{msg}}
</div>

HTML 绑定 Vue实例,在页面加载时会闪烁

{{msg}}

然后才会出现 加载完成 字样,为了效果更明显,我们可以延后加载 Vue 实例

setTimeout(() => {
new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
},2000)

v-cloak 可以解决这一问题,在 css 中加上

[v-cloak] {
display: none;
}

在 html 中的加载点加上 v-cloak,就可以解决这一问题

<div id="app" v-cloak>
{{msg}}
</div>

Vue1.x 与 Vue2 中 v-cloak 的不同

Vue1 中,允许将 Vue 实例挂载在 body 上,而 Vue2 是不允许的,想对整个页面实例化,需要另外用一个 div 来容纳整个页面内容,对其进行实例化

这样在使用 v-cloak 时,同样需要用到这种方法

为什么我用的 v-cloak 无效?

在实际项目中,我们常通过 @import 来加载 css 文件

@import "style.css"
@import "index.css"

而 @import 是在页面 DOM 完全载入后才会进行加载,如果我们将 [v-cloak] 写在 @import 加载的 css 文件中,就会导致页面仍旧闪烁。

为了避免这种情况,我们可以将 [v-cloak] 写在 link 引入的 css 中,或者写一个内联 css 样式,这样就得到了解决。

Vue 中的 v-cloak 解读的更多相关文章

  1. vue中的vue-cli

    在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...

  2. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  3. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  4. 在Vue中的load或ready的加载时机

    在Vue中的load或ready的加载时机 1.我们来插入一段代码来分析: Js代码如下 <script type="text/javascript"> var app ...

  5. vue中的filters的用法

    1.效果 金额保留两位小数,并加上单位元 2.index.html <!DOCTYPE html> <html lang="en"> <head> ...

  6. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  7. vue中$watch源码阅读笔记

    项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单 ...

  8. 025——VUE中事件的基本使用与VUE中差异

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 024——VUE中filter的使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. 023——VUE中数据排序sort() / 数据反转 reverse() 的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Python(多进程multiprocessing模块)

    day31 http://www.cnblogs.com/yuanchenqi/articles/5745958.html 由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分 ...

  2. Spring常用知识点总结

    1. Spring有哪些优点? 轻量级:Spring在大小和透明性方面绝对属于轻量级的,基础版本的Spring框架大约只有2MB. 控制反转(IOC):Spring使用控制反转技术实现了松耦合.依赖被 ...

  3. 快速滑动时 `cellForRow` 的调用次数

    问题 有一个 1000 个 cell 的 tableView,刚刚进入界面时,contentOffset 为 0.用手快速滑动 tableView,直至最下面一个 cell 显示在屏幕上. 这个过程中 ...

  4. iOS下载图片失败

    一.具体问题 开发的过程中,发现某个界面部分图片的显示出现了问题只显示占位图片,取出图片的url在浏览器却是能打开的,各种尝试甚至找同行的朋友帮忙在他们项目里展示都会存在问题,最终发现通过第三方框架S ...

  5. 杭电OJ第11页2000-2009道题(C语言)

    1. ASCII码排序 问题描述 输入三个字符后,按各字符的ASCII码从小到大的顺序输出这三个字符 Input: 输入数据有多组,每组占一行,有三个字符组成,之间无空格 Output: 对于每组输入 ...

  6. crop和resize操作区别

    crop:对图像进行剪切 resize:对图像进行伸缩 实践代码 import cv2 bb2d = [30, 30, 72 ,42] image = cv2.imread('car.png') pt ...

  7. javascript数据基本类型和引用类型区别详解

    JavaScript基本数据类型: js基本数据类型包括:undefined,null,number,boolean,string.基本数据类型是按值访问的,就是说我们可以操作保存在变量中的实际的值. ...

  8. 监督学习——决策树理论与实践(上):分类决策树

    1. 介绍         决策树是一种依托决策而建立起来的一种树.在机器学习中,决策树是一种预测模型,代表的是一种对象属性与对象值之间的一种映射关系,每一个节点代表某个对象/分类,树中的每一个分叉路 ...

  9. LINUX 下 NMAP 内网扫描

    #1.扫描内网存活主机 nmap -sP 10.2.24.* |grep for > tmp #2.扫描主机端口 nmap -A -T4 192.168.1.2 #3.扫描主机的所有端口 nma ...

  10. Chapter 3 Phenomenon——11

    "I'm completely fine, Char — Dad," I sighed. "There's nothing wrong with me." “我 ...