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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
JS判断字符串包含的方法
May 05 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 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 ZipArchive压缩函数详解实例
2013/11/06 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
JsRender for object语法简介
2014/10/31 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
Python中的Numpy入门教程
2014/04/26 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
django静态文件加载的方法
2018/05/20 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
信息学院毕业生自荐信范文
2014/03/04 职场文书
入党综合考察材料
2014/06/02 职场文书
关于保护环境的标语
2014/06/09 职场文书
老龄工作先进事迹
2014/08/15 职场文书
工会趣味活动方案
2014/08/18 职场文书
店铺转让协议书
2014/12/02 职场文书
财务工作失误检讨书
2015/02/19 职场文书
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python