问题

在使用vue时,HTML 绑定 Vue实例,在页面加载时会闪烁类似{{msg}}这样的信息。可能会导致用户体验不好。

使用v-cloak

v-cloak就能解决这个问题。

(1)用法

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

官方API

我们可以在 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的更多相关文章

  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中的filters的用法

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

  5. vue中动态添加div

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

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

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

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

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

  8. 024——VUE中filter的使用

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

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

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

  10. 022——VUE中remove()方法的使用:

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

随机推荐

  1. C# 之 反射性能优化3

    阅读目录 开始 用Delegate优化反射的缺点 用Delegate优化反射的优点 用CodeDOM优化反射的优点 如何用好CodeDOM? 用CodeDOM优化反射的缺点 能不能不使用委托? 根据反 ...

  2. request.user哪里来的?

    1.登录认证(auth认证登录后login后设置了session等信息包含用户的pk)      >>>>>               2.用户再次请求登录的时候,通过 ...

  3. dos文件(夹)复制命令:copy和xcopy

    1.copy命令 将一份或多份文件复制到另一个位置. COPY [/D] [/V] [/N] [/Y | /-Y] [/Z] [/L] [/A | /B ] source [/A | /B] [+ s ...

  4. net core体系-web应用程序-4net core2.0大白话带你入门-11asp.net core 2.0 cookie的使用

    asp.net core 2.0 cookie的使用   本文假设读者已经了解cookie的概念和作用,并且在传统的.net framework平台上使用过. cookie的使用方法和之前的相比也有所 ...

  5. Codeforces 1111D Destroy the Colony 退背包 (看题解)

    第一次知道这种背包还能退的.... 我们用dp[ i ]表示选取若干个物品重量到达 i 的方案数. 如果我们g[ i ]表示不用第 x 个物品的, 然后选若干其他的物品到达 i 的方案数. if(i ...

  6. sqlldr的使用

    1,在公司进行预处理的时候,发现文件不能入库,而公司前辈使用的是sqlldr的技术将解析后的文件入库,前辈在测试的时候使用的是本机上的数据库(见图一),没有使用完整的远程连接oracle的正确方式,所 ...

  7. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第二集之新建虚拟机】

    1, 2, 3, 4,(如果选择版本时,发现选项中没有centos,可以选择other linux2.6.x kernel) 5,(虚拟机命名:Centos_用途_IP) 6,(选择Split vir ...

  8. Substrings kmp

    Problem Description You are given a number of case-sensitive strings of alphabetic characters, find ...

  9. mySql版本的相关问题:com.mysql.cj.jdbc.Driver和com.mysql.jdbc.Driver

    Mysql版本的相关问题:com.mysql.cj.jdbc.Driver和com.mysql.jdbc.Driver 1. 在使用mysql时,控制台日志报错如下: Loading class `c ...

  10. 003 python中的内置函数

    一:如何查看内置函数 1.命令 dir(__builtins__) 2.效果 二:具体的用法 1.input 简单使用: 2.type 返回变量的类型 3.str 将类型转变为字符串 4.isinst ...