v-cloak 的作用和用法

用法:

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

<div id="app">

{{msg}}

</div>

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

然后才会出现 加载完成 字样,为了效果更明显,我们可以延后加载 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 样式,这样就得到了解决。

Vue中的v-cloak用法的更多相关文章

  1. 详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...

  2. vue 中 命名视图的用法

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

  3. vue中watch的详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...

  4. vue中的filters的用法

    1.效果 金额保留两位小数,并加上单位元 2.index.html <!DOCTYPE html> <html lang="en"> <head> ...

  5. vue中watch的详细用法(转载)

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...

  6. vue中this.$set的用法

    之前了解这个方法的时候,感觉这一辈子也用不到这个方法,因为当时没有应用场景,但是还真有用的时候,我相信你们也有用到时候. 从三个方面给大家说一下这个this.$set: 1.this.$set实现什么 ...

  7. vue中$ref的基本用法

    1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...

  8. vue中watch函数的用法

    vue中watch函数: 不仅可以判断路由变化(上篇博客有介绍),还可以判断数据的变化 (1):首先写watch函数 (2):在data里定义值 (3):在methods里写方法 (4):使用值

  9. vue中router-link的详细用法

    官网文档地址:https://router.vuejs.org/zh/api/#to 今天项目突然有需求,让vue中的一个页面跳转到另一个页面 // 字符串 <router-link to=&q ...

  10. Vue中echarts的基本用法

    前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的e ...

随机推荐

  1. Django学习-18-中间件

    为了验证中间件功能和函数执行过程,手动注册3个中间件到setting.py文件中 MIDDLEWARE = [ 'django.middleware.security.SecurityMiddlewa ...

  2. 系统架构以及需要导入的jar包

    架构: Servlet +JSP +JavaBean +JDBC 需要导入的jar包: MYSQL: 数据库驱动 C3PO连接池: (这个需要配置文件) C3PO DBUtils:特点:轻量级首选,增 ...

  3. visual studio编写C#代码时“未能从程序集.....中加载类型”和“找不到方法”的一种可能的解决办法

    编译前报错:$exception    {"未能从程序集"XSW.MySQLDAL, Version=1.0.0.0, Culture=neutral, PublicKeyToke ...

  4. 零基础新手学习Java必须知道的市场行情

    Java如今的市场不如从前,竞争很大,工资非常高,标准非常高,想要胜任一份高薪的工作不是那么容易,只有掌握最新的行情才能更好的了解Java,才能更好的在这个领取发展,让新手小白了解Java市场行情如下 ...

  5. 12-7jquery选择器学习

    p:odd 选择奇数个数的p标签   p:even选择奇数个数的p标签   p:gt(n)选择下标 大于n的p标签   p:lt(n)选择下标小于n的p标签   $(":root " ...

  6. 新的一年新的变化!IT的大变天

    今天是一个特别的日子,祝女神朋友们,节日快乐,早点下班! 新的一年,大家又忙碌在加班加点的堆代码中,bug的陪伴使我快乐使我忧伤,想想想,也奋斗了五六百的岁月,实习期向往大城市的公司,梦想着有一天与自 ...

  7. 在windows10上配置Android的环境变量

    一, 首先右击"我的计算机"或"此电脑"图标,在弹出来的下拉列表中点击"属性(R)",进入到"系统"属性面板,点击左侧的 ...

  8. Oracle删除控制文件恢复

    控制文件被删除后,系统崩溃,下面介绍下如何恢复控制文件 SQL> conn / as sysdbaConnected to an idle instance.SQL> startup no ...

  9. 夹缝中求生存-在一无所有的php虚拟主机环境下利用smtp发送邮件(二)

    夹缝中求生存 前言:在上一篇随笔中,以163个人邮箱作为发送邮箱地址,当收件邮箱为QQ邮箱时,极有可能会被直接扔进邮件垃圾箱里,为了解决这个问题,申请注册企业邮箱,可以减少发出的邮件被当作垃圾邮件的可 ...

  10. 使用IIS Server Farms搭建应用服务负载均衡

    当公司的业务扩大, 伴随着大量的请求,应用服务器的承受能力已经不能满足不断增长的业务需求,使用IIS Server Farms搭建应负载均衡的方式,把请求分发给不同的应用服务器进行处理,这个时候就降低 ...