Vue中的v-cloak使用解读


Posted in Javascript onMarch 27, 2017

v-cloak 的作用和用法

用法:

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

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

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

Vue中的v-cloak使用解读

然后才会出现 加载完成 字样,为了效果更明显,我们可以延后加载 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 样式,这样就得到了解决。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
js中cookie的使用详细分析
May 28 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
vuex实现简易计数器
Oct 27 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
js实现抽奖效果
Mar 27 #Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 #Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 #Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 #Javascript
JS简单实现数组去重的方法示例
Mar 27 #Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 #jQuery
基于JavaScript实现焦点图轮播效果
Mar 27 #Javascript
You might like
MySQL中create table语句的基本语法是
2007/01/15 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
简单的Python的curses库使用教程
2015/04/11 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Keras设置以及获取权重的实现
2020/06/19 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
商业门面租房协议书
2014/11/25 职场文书
布达拉宫导游词
2015/02/02 职场文书
社区服务活动报告
2015/02/05 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
javascript对象3个属性特征
2021/11/17 Javascript
关于EntityWrapper的in用法
2022/03/22 Java/Android
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle