vue中的v-cloak
问题
在使用vue时,HTML 绑定 Vue实例,在页面加载时会闪烁类似{{msg}}
这样的信息。可能会导致用户体验不好。
使用v-cloak
v-cloak就能解决这个问题。
(1)用法
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }
一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
我们可以在 css 中加上:
[v-cloak] {
display: none;
}
然后在 html 中的加载点加上 v-cloak
,就可以解决这一问题:
<div id="app" v-cloak>
{{msg}}
</div>
(2)Vue1.x 与 Vue2 中 v-cloak 的不同
Vue1 中,允许将 Vue 实例挂载在 body 上,而 Vue2 是不允许的,想对整个页面实例化,需要另外用一个 div 来容纳整个页面内容,对其进行实例化。
这样在使用 v-cloak
时,同样需要用到这种方法。
(3)为什么我用的 v-cloak 无效?
在实际项目中,我们常通过 @import
来加载 css 文件
@import "style.css"
@import "index.css"
而 @import
是在页面 DOM 完全载入后才会进行加载,如果我们将 [v-cloak]
写在 @import
加载的 css 文件中,就会导致页面仍旧闪烁。
为了避免这种情况,我们可以将[v-cloak]
写在 link 引入的 css 中,或者写一个内联 css 样式,这样就得到了解决。
vue中的v-cloak的更多相关文章
- vue中的vue-cli
在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...
- Vue学习笔记七:Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- vue 中 直接操作 cookie 及 如何使用工具 js-cookie
转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...
- vue中的filters的用法
1.效果 金额保留两位小数,并加上单位元 2.index.html <!DOCTYPE html> <html lang="en"> <head> ...
- vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...
- vue中$watch源码阅读笔记
项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单 ...
- 025——VUE中事件的基本使用与VUE中差异
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 024——VUE中filter的使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 023——VUE中数据排序sort() / 数据反转 reverse() 的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 022——VUE中remove()方法的使用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- WPF多屏最大化
如果计算机存在多个显示器,这时设置wpf窗口为最大化,窗口只能在主显示器中实现最大化,如果想要实现窗口拉伸至多屏,需要获取所有显示器分辨率之和.这时用到了System.Windows.SystemPa ...
- You have new mail in /var/spool/mail/root消除提示的方法
有时在进入系统的时候经常提示You have new mail in /var/spool/mail/root 你觉得烦人---解决方法: 修改系统配置文件/etc/profile,告诉系统不要去检查 ...
- zprofiler三板斧解决cpu占用率过高问题(转载)
zprofiler三板斧解决cpu占用率过高问题 九居 JVM性能与调试平台 zprofiler 上周五碰到了一个线上机器cpu占用率过高的问题.问题本身比较简单,但是定位过程中动用了多个zp ...
- mysql基础理论
第一节数据库管理系统概述 在www.db-engines.com/en/ 这个网站中可以看到对数据库的排名 数据库分为: 关系型数据库: mysql------mariaDB oracle 非关系型数 ...
- sql 跨服务器查询
创建链接服务器 exec sp_addlinkedserver 'ITSV ', ' ', 'SQLOLEDB ', '远程服务器名或ip地址 ' exec sp_addlinkedsrvlogin ...
- Unknown lifecycle phase "mvn"
Unknown lifecycle phase "mvn" maven执行命令错误 : 执行输入命令即可,不需要添加 mvn 此处不需要写mvn,而是执行写compile就行,否 ...
- Spring Boot Starters 列表
Spring Boot application starters 名称 描述 Pom spring-boot-starter 核心starter,包括自动配置支持,日志和YAML Pom spring ...
- 根据cookie记录跟踪ID来确定分享对象
一 :思路分析 1:用户注册的时候标记推客 2:推客生成分享链接 分享链接构成 (环境前缀+(此链接打开时需要调用的接口+推客的标记+&url=(商品的链接))) 3:需要写一个分享链接调 ...
- pyqt pyside QPushButton 图标(icon)大小自适应设置
pyqt pyside QPushButton 图标(icon)大小自适应设置 img = QtGui.QImage(r'd:/test.png') pixmap = QtGui.QPixmap(im ...
- 在jsp页面上方定义<style> 可以自定义class的样式
<style>.border-orange{ border:1px solid orange; width:120px; box-sizing: border-box; margin-bo ...