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面向对象编程
Mar 18 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
简单的js计算器实现
Oct 26 Javascript
深入理解vue中的$set
Jun 01 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
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制作图型计数器的例子
2006/10/09 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
python实现点对点聊天程序
2018/07/28 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
python实现拼接图片
2020/03/23 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
自我鉴定注意事项
2014/01/19 职场文书
自我鉴定总结
2014/03/24 职场文书
保险公司增员口号
2015/12/25 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL