Vue 中的 v-cloak 作用及用法-vue页面加载时会闪烁

用法：

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

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

HTML 绑定 Vue实例，在页面加载时会闪烁

 {{msg}}

然后才会出现 加载完成 字样，为了效果更明显，我们可以延后加载 Vue 实例

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

v-cloak 可以解决这一问题，在 css 中加上

[v-cloak] {display: none;
}

在 html 中的加载点加上 v-cloak，就可以解决这一问题

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

Vue1.x 与 Vue2 中 v-cloak 的不同

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

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

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

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

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

而 @import 是在页面 DOM 完全载入后才会进行加载，如果我们将 [v-cloak] 写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。

为了避免这种情况，我们可以将 [v-cloak] 写在 link 引入的 css 中，或者写一个内联 css 样式，这样就得到了解决。

转自：https://www.cnblogs.com/TigerZhang-home/p/7483182.html

Vue 中的 v-cloak 作用及用法-vue页面加载时会闪烁相关推荐

uniapp、Vue中 image 如何设置默认图片，图片地址加载失败（404）的话就显示默认图片
一.解决方法(在单层循环中) HTML: 在image标签当中添加@error,用来监听图片地址加载失败,同时传递参数 <image v-else :src="item" m ...
vue中的key的作用？
一.写在前面下面总结一下,vue中的key的作用,在vue中我们可能在两种情况下使用key,第一种情况下就是在v-if中,第二种情况下就是在v-for中使用key.下面我们来看一下key在其中起到的 ...
vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
C#中using关键字的作用及其用法(转)
C#中using关键字的作用及其用法 using的用途和使用技巧. using关键字微软MSDN上解释总共有三种用途: 1.引用命名空间. 2.为命名空间或类型创建别名. ...
Vue中key属性的作用
Vue中key属性的作用在列表渲染时使用key属性使用key属性强制替换元素在列表渲染时使用key属性相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用 ...
vue中关于$emit及propos的用法
vue中关于$emit及propos的用法一:父组件可以使用propos把数据传递给子组件. 父组件:在父组件中的子组件标签中,通过父组件给子组件传递函数类型的props实现:子给父传递数据如: 子 ...
Vue中的 key 的作用是什么？
这个问题,其实也是经常问的,对于刚刚毕业的大学生来说, 面试官问:vue中循环遍历数组的时候,为什么要加 key/key的作用是什么? 看一下官网的回答 key属性主要在 vue 的虚拟 DOM算法, ...
在vue中 storge 和vuex使用的用法区别
在vue中 storge 和vuex使用的用法区别 1.联动性:storge对于属性的改变不能触发其他页面的改动 storage: 存取login之后就不会改变的信息,比如userId, isAdmi ...
Java中static关键字的作用与用法
一.static关键字的特点: static是一个修饰符,用于修饰类的成员方法.类的成员变量,另外可以编写static代码块来优化程序性能. 1. static修饰成员方法 static修饰的方法一般 ...

Vue 中的 v-cloak 作用及用法-vue页面加载时会闪烁

Vue1.x 与 Vue2 中 v-cloak 的不同

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

Vue 中的 v-cloak 作用及用法-vue页面加载时会闪烁相关推荐

最新文章

热门文章