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 相关文章推荐
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
整理一下常见的IE错误
Nov 18 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JavaScript 接口原理与用法实例详解
May 12 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
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
python实现ftp客户端示例分享
2014/02/17 Python
Python重新引入被覆盖的自带function
2014/07/16 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
python实现两个文件合并功能
2018/04/01 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
高二物理教学反思
2014/02/08 职场文书
一年级评语大全
2014/04/23 职场文书
宣传工作经验材料
2014/06/02 职场文书
社区志愿者活动总结
2014/06/26 职场文书
私人委托书格式
2014/09/10 职场文书
2015年大学生实习评语
2015/03/25 职场文书
教师研修随笔感言
2015/11/18 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis