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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
JavaScript 学习笔记(十一)
Jan 19 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 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
利用PHP将部分内容用星号替换
2020/04/21 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
python 判断一个进程是否存在
2009/04/09 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
文明学生事迹材料
2014/01/29 职场文书
大学生简短的自我评价
2014/09/12 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
优秀班组申报材料
2014/12/25 职场文书
初一军训感言
2015/08/01 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python