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的.live()和.die() 使用介绍
Sep 10 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
jQuery选择器全集详解
Nov 24 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
php结合js实现多条件组合查询
May 28 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 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数组循环操作详细介绍 附实例代码
2013/02/03 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
js模拟类继承小例子
2010/07/17 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
vuex实现简易计数器
2016/10/27 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python批量读取文件名并写入txt文件中
2020/09/05 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
Python容器类型公共方法总结
2020/08/19 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
试述DBMS的主要功能
2016/11/13 面试题
课外科技活动总结
2014/08/27 职场文书
司机个人年终总结
2015/03/03 职场文书
务工证明怎么写
2015/06/18 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
KVM基础命令详解
2022/04/30 Servers