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 相关文章推荐
javascript之Partial Application学习
Jan 10 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
JavaScript多线程详解
Aug 12 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
django中使用vue.js的要点总结
Jul 07 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Python中进程和线程的区别详解
2017/10/29 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python openpyxl使用方法详解
2019/07/18 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
python 命名规范知识点汇总
2020/02/14 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
一些Solaris面试题
2015/12/22 面试题
幼儿园教师自我鉴定
2014/03/20 职场文书
大班幼儿评语大全
2014/04/30 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
校园运动会广播稿
2015/08/19 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python