Vue中的v-cloak用法
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用法的更多相关文章
- 详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...
- vue 中 命名视图的用法
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...
- vue中watch的详细用法
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
- vue中的filters的用法
1.效果 金额保留两位小数,并加上单位元 2.index.html <!DOCTYPE html> <html lang="en"> <head> ...
- vue中watch的详细用法(转载)
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
- vue中this.$set的用法
之前了解这个方法的时候,感觉这一辈子也用不到这个方法,因为当时没有应用场景,但是还真有用的时候,我相信你们也有用到时候. 从三个方面给大家说一下这个this.$set: 1.this.$set实现什么 ...
- vue中$ref的基本用法
1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...
- vue中watch函数的用法
vue中watch函数: 不仅可以判断路由变化(上篇博客有介绍),还可以判断数据的变化 (1):首先写watch函数 (2):在data里定义值 (3):在methods里写方法 (4):使用值
- vue中router-link的详细用法
官网文档地址:https://router.vuejs.org/zh/api/#to 今天项目突然有需求,让vue中的一个页面跳转到另一个页面 // 字符串 <router-link to=&q ...
- Vue中echarts的基本用法
前言:同大多数的前端框架一样,先读官网的使用方法.学会基本使用后,在实例中找到自己想要demo.拿过来改一改,一个echarts图表就形成,毕竟人家做就是为了方便使用. 我是在vue中下面直接使用的e ...
随机推荐
- Django学习-18-中间件
为了验证中间件功能和函数执行过程,手动注册3个中间件到setting.py文件中 MIDDLEWARE = [ 'django.middleware.security.SecurityMiddlewa ...
- 系统架构以及需要导入的jar包
架构: Servlet +JSP +JavaBean +JDBC 需要导入的jar包: MYSQL: 数据库驱动 C3PO连接池: (这个需要配置文件) C3PO DBUtils:特点:轻量级首选,增 ...
- visual studio编写C#代码时“未能从程序集.....中加载类型”和“找不到方法”的一种可能的解决办法
编译前报错:$exception {"未能从程序集"XSW.MySQLDAL, Version=1.0.0.0, Culture=neutral, PublicKeyToke ...
- 零基础新手学习Java必须知道的市场行情
Java如今的市场不如从前,竞争很大,工资非常高,标准非常高,想要胜任一份高薪的工作不是那么容易,只有掌握最新的行情才能更好的了解Java,才能更好的在这个领取发展,让新手小白了解Java市场行情如下 ...
- 12-7jquery选择器学习
p:odd 选择奇数个数的p标签 p:even选择奇数个数的p标签 p:gt(n)选择下标 大于n的p标签 p:lt(n)选择下标小于n的p标签 $(":root " ...
- 新的一年新的变化!IT的大变天
今天是一个特别的日子,祝女神朋友们,节日快乐,早点下班! 新的一年,大家又忙碌在加班加点的堆代码中,bug的陪伴使我快乐使我忧伤,想想想,也奋斗了五六百的岁月,实习期向往大城市的公司,梦想着有一天与自 ...
- 在windows10上配置Android的环境变量
一, 首先右击"我的计算机"或"此电脑"图标,在弹出来的下拉列表中点击"属性(R)",进入到"系统"属性面板,点击左侧的 ...
- Oracle删除控制文件恢复
控制文件被删除后,系统崩溃,下面介绍下如何恢复控制文件 SQL> conn / as sysdbaConnected to an idle instance.SQL> startup no ...
- 夹缝中求生存-在一无所有的php虚拟主机环境下利用smtp发送邮件(二)
夹缝中求生存 前言:在上一篇随笔中,以163个人邮箱作为发送邮箱地址,当收件邮箱为QQ邮箱时,极有可能会被直接扔进邮件垃圾箱里,为了解决这个问题,申请注册企业邮箱,可以减少发出的邮件被当作垃圾邮件的可 ...
- 使用IIS Server Farms搭建应用服务负载均衡
当公司的业务扩大, 伴随着大量的请求,应用服务器的承受能力已经不能满足不断增长的业务需求,使用IIS Server Farms搭建应负载均衡的方式,把请求分发给不同的应用服务器进行处理,这个时候就降低 ...