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 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

在Html中使用Requirejs进行模块化开发

在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发。 ...

265100
来自专栏iOS开发攻城狮的集散地

更改网页的标签

17040
来自专栏JetpropelledSnake

Vue学习笔记之表单绑定输入

单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。

7310
来自专栏Crossin的编程教室

在 Win 控制台中实现菜单

本教室的 hymyg 同学实现了两个控制台下的实用模块,发在了论坛上。我觉得挺不错的,于是分享其中的一个给大家。对项目感兴趣,想进一步了解细节的,可以在公众号里...

29450
来自专栏MelonTeam专栏

Password Auto Fill

前言 在 WWDC 17 Session 206 中,介绍了这个 iOS 11 加入的新功能。尽管这个功能特别简单,但几乎是今年所有发布的新功能中我最喜欢的一...

22360
来自专栏进击的君君的前端之路

JS相关概念

17520
来自专栏mySoul

微信小程序初步入坑指南

https://developers.weixin.qq.com/miniprogram/dev/devtools/beta.html

16340
来自专栏IMWeb前端团队

图片上传前预处理,等比缩放、裁剪 (html5 + canvas)

本文作者:IMWeb capricorncd 原文出处:IMWeb社区 未经同意,禁止转载 ? Image pre processing for up...

78160
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(二)

2.2 选中MasterViewController.xib 选中view,然后把它拖动的更宽更高,不必在意具体的尺寸细节,要能够放下新的控件就可以。

15420
来自专栏BestSDK

Mockplus教程:2钟搞定APP首页原型设计,3000个免费素材库

创建项目 ? 打开Mockplus,点击新建项目,选择“手机”项目类型与合适的页面尺寸,点击“确定”即创建成功,是不是不能更简单!无需任何文件创建操作,无需输入...

33650

扫码关注云+社区

领取腾讯云代金券