Vue.js 中的 v-cloak 指令及使用详解


Posted in Javascript onNovember 19, 2018

先来看下vue.js 中的v-cloak 指令

Vue.js 中的 v-cloak 指令及使用详解

可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。

当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

html:

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

js:

<script>
  var app = new Vue({
    el: '#app',
    data: {
      context:'互联网头部玩家钟爱的健身项目'
    }
  });
</script>

效果:

Vue.js 中的 v-cloak 指令及使用详解

我们使用 v-cloak 指令来解决屏幕闪动的问题吧O(∩_∩)O~

js 不变,在 div 中加入 v-cloak 指令。

html:

<div id="app" v-cloak>
  {{context}}
</div>

css:

[v-cloak]{
  display: none;
}

使用 v-cloak 指令之后的效果( demo ):

Vue.js 中的 v-cloak 指令及使用详解

在简单项目中,使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中(webpack、vue-router)只有一个空的 div 元素,元素中的内容是通过路由挂载来实现的,这时我们就不需要用到 v-cloak 指令咯。

下面看下Vue中v-cloak使用详解

这次给大家带来Vue中v-cloak使用详解,Vue中v-cloak使用的注意事项有哪些,下面就是实战案例,一起来看一下。

v-cloak 的作用和用法

用法:

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

setTimeout(() => {
 newVue({
  el:'#app',
  data: {
   msg:'hello'
  }
 })
},2000)

v-cloak 可以解决这一问题,在 css 中加上HTML 绑定 Vue实例,在页面加载时会闪烁然后才会出现加载完成字样,为了效果更明显,我们可以延后加载 Vue 实例

[v-cloak] {
 display: none;
}

Vue1.x 与 Vue2 中 v-cloak 的不同在 html 中的加载点加上 v-cloak,就可以解决这一问题

Vue1 中,允许将 Vue 实例挂载在 body 上,而 Vue2 是不允许的,想对整个页面实例化,需要另外用一个 p 来容纳整个页面内容,对其进行实例化

这样在使用 v-cloak 时,同样需要用到这种方法

为什么我用的 v-cloak 无效?

在实际项目中,我们常通过 @import 来加载 css 文件

@import"style.css"
@import"index.css"

为了避免这种情况,我们可以将[v-cloak]写在 link 引入的 css 中,或者写一个内联 css 样式,这样就得到了解决。而 @import 是在页面 DOM 完全载入后才会进行加载,如果我们将[v-cloak]写在 @import 加载的 css 文件中,就会导致页面仍旧闪烁。

总结

以上所述是小编给大家介绍的Vue.js 中的 v-cloak 指令及使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
js实现文本框选中的方法
May 26 Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
实现vuex原理的示例
Oct 21 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 #Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 #Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 #Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 #Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 #Javascript
Javascript实现动态时钟效果
Nov 17 #Javascript
使用Javascript简单计算器
Nov 17 #Javascript
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
php 魔术方法使用说明
2009/10/20 PHP
PHP数据类型的总结分析
2013/06/13 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
python二元表达式用法
2019/12/04 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python类如何定义私有变量
2020/02/03 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
怎么写自荐书范文
2014/02/12 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
化学教育专业自荐信
2014/07/04 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
合作协议书范本
2014/10/25 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
学生病假条怎么写
2015/08/17 职场文书
2016大一新生军训感言
2015/12/08 职场文书