vue中的v-cloak

问题

在使用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 样式,这样就得到了解决。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

2988
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2192
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2717
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

4778
来自专栏杨龙飞前端

scrollto 到指定位置

2524
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4868
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6948
来自专栏java 成神之路

使用 NIO 实现 echo 服务器

4717
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2070

扫码关注云+社区