关于Vue中v-cloak的使用讲解

最新推荐文章于 2024-07-04 10:12:44 发布
最新推荐文章于 2024-07-04 10:12:44 发布
阅读量1.4k 收藏 4
点赞数 1
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5c25ca4df265da6172658d79
版权

关于Vue.js中v-cloak的使用，单看官方文档，可能看得有点迷糊：

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

一个问题

v-cloak指令的设计是为了解决什么问题？

?下面代码：

<div class="#app">
    <p>{{message}}</p>
</div>
复制代码

在网络不好或加载数据过大的情况下，页面在渲染的过程会闪烁Mustache 标签：

为了用户有更好的优化体验，Vue加入了延缓响应的指令v-cloak,在与css:[v-cloak] { display: none } 的配合下，可以隐藏未编译 Mustache 的标签直到实例准备完毕，v-cloak属性才会被自动去除，对应的标签也才可见了。

当然上面的例子很难看到页面闪烁，因为太快了，我们延后加载 Vue 实例：示例参考

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
    <style type="text/css">
      [v-cloak] {
        display: none !important;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <span>{{ msg }}</span>
    </div>
    <script>
      setTimeout(() => {
        new Vue({
          el: '#app',
          data: {
            msg: 'hello vue'
          }
        })
      }, 2000)
    </script>
  </body>
</html>
复制代码

代码运行，在2000ms前页面显示的是{{ msg }}。

现在往<span>{{ msg }}</span>中添加v-cloak指令，在运行代码：

前2000ms页面为空，2000ms后出现hello vue，解决了在实例挂载之前，页面闪现Mustache 标签的尴尬问题。

v-cloak 无效问题

问题出现在[v-cloak] { display: none }的失效。

1、v-cloak的display属性可能被层级更高css给覆盖了,解决方法:用important加权：

 [v-cloak] {
        display: none !important;
      }
复制代码

2、最好的解决办法就是在index.html中，以内联css的方式引入。

 <style type="text/css">
      [v-cloak] {
        display: none !important;
      }
    </style>
复制代码
weixin_34417183
关注
v-cloak 指令,v-once 指令,v-pre 指令,事件修饰符,v-model原理 ,自定义指令，二级联动
XCXLOVE_的博客
03-17 1080
/ 使用时要v-自定义名称// 函数写法// 名称(节点,绑定对象){}// 对象写法// 名称:{// 绑定成功调用// bind(节点,绑定对象){},// 插入到页面调用// inserted(节点,绑定对象){},// 重新解析时调用(值发生改变)// update(节点,绑定对象){}// }2.局部自定义指令//directives ,写入Vue实例中// .全局自定义指令// Vue.directive ,定义在实例化之前<body>
前端开发：Vue中的v-指令使用的汇总，金三银四旗开得胜
2401_84023482的博客
04-02 898
场景：当页面加载时，让输入框获得焦点。只要在打开这个页面后还没点击过任何内容的时候，这个输入框就应当还是处于聚焦状态，这里使用v-focus指令来实现该需求，具体使用如下所示：// 注册全局自定义指令v-focus// 当被绑定的元素将要插入到 DOM 中时// 聚焦对应的元素el.focus();});//在输入框使用的地方使用上述自定义指令场景：如果指令需要有多个值，可传入一个 JavaScript 对象字面量，但是该指令函数能够接受所有合法的 JavaScript 表达式。
Vue 中的 v-cloak 指令理解与用法
最新发布
My_wife_QBL的博客
07-04 1350
v-cloakv-cloak指令是 Vue 提供的一个非常有用的特性，它可以帮助我们在 Vue 实例编译完成之前隐藏未编译的 Mustache 标签，从而提升用户体验。通过在元素上添加v-cloak指令，并结合 CSS 样式，我们可以确保在 Vue 实例编译完成之前，这些元素是不可见的。在实际开发中，我们应该根据具体需求合理使用v-cloak指令，避免滥用，以保持代码的简洁和高效。希望本文能够帮助你全面理解 Vue 中的v-cloak指令，并在实际开发中发挥其最大的价值。
v-cloak的使用
gansu12的博客
07-23 199
v-cloak的使用方法
V-cloak的用法
qq_53665850的博客
05-17 360
V-cloak的用法
Vue技术 v-cloak指令（用于在 Vue 实例加载和编译之前隐藏元素）
weixin_55772633的博客
07-11 8394
指令通常与 CSS 配合使用，用于在 Vue 实例加载和编译之前隐藏元素。通过给元素添加 属性，然后在 CSS 中定义对应的样式，可以确保在 Vue 实例加载完成前，该元素的内容不会显示在页面上。使用 指令的一般步骤如下：在 HTML 中定义元素，并添加 属性： 在 CSS 中定义 的样式，使元素隐藏： 在上面的示例中，通过给 元素添加 属性，并定义对应的 CSS 样式，可以确保在 Vue 实例加载完成之前，该元素的内容不会显示在页面上。示例 此案例在页面加载的时候不会展示“欢迎Vu
前端开发：Vue中的v-指令使用的汇总
04-12 376
场景：当页面加载时，让输入框获得焦点。只要在打开这个页面后还没点击过任何内容的时候，这个输入框就应当还是处于聚焦状态，这里使用v-focus指令来实现该需求，具体使用如下所示：// 注册全局自定义指令v-focus// 当被绑定的元素将要插入到 DOM 中时自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。
vue-property
03-28
下面，我将深入讲解Vue.js中的属性绑定及其相关知识点。 在Vue中，数据绑定是其核心特性之一，它允许我们把组件的视图和模型紧密关联起来。这种双向数据绑定使得当模型数据改变时，视图会自动更新，反之亦然。主要...
vue-ppt.7z
11-02
6. **指令和插槽**：Vue.js提供了一系列内置指令，如v-model（双向数据绑定），v-pre（跳过编译），v-cloak（隐藏未编译的模板）等。同时，插槽用于在组件内部定义可插入的自定义内容。 7. **生命周期钩子**：Vue...
【Vue知识体系总结 2】Vue动态绑定v-bind
2401_84097745的博客
04-08 737
message: ‘你好啊，哪吒’})// 命令式编程// 1.创建div元素，设置id属性//2.定义一个变量叫message//3.将message变量放到前面的div中显示。
Vue 中的 v-cloak 解读
Catie
07-25 6752
v-cloak 的作用和用法 用法： 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。官方API div id="app"> {{msg}} div> HTML 绑定 Vue实例，在页面加载时会闪烁
v-cloak使用
weixin_30437847的博客
07-13 96
v-cloak：保持和元素实例的关联，直到结束编译后自动消失。 v-cloak指令和CSS 规则一起用的时候，能够解决差值表达式闪烁的问题（即：可以隐藏未编译的标签直到实例准备完毕）。 就拿上一段代码来举例，比如说，{{name}}这个内容，在网速很慢的情况下，一开始会直接显示{{name}}这个内容，等网络加载完成了，才会显示smyhvae。那这个闪烁的问题该怎么解决呢？ 解决办法是：通过...
v-cloak指令的使用
噗嗤
11-16 1973
v-cloak的使用场景 v-cloak指令常常用在插值表达式的标签中，因为它可以解决当网络加载很慢时，或者频繁渲染时候，页面就会显示出源代码的情况。 v-cloak的使用 首先，在差值语法所在的标签处加上v-cloak指令 <h3 v-cloak>{{name}}</h3> 然后，在css中设置v-cloak的属性为display为none <style type="text/css"> [v-cloak]{ d.
v-cloak的用法和注意事项
weixin_30419799的博客
04-26 171
v-cloak是前端框架vue.js中的一个方法，作用是为了防止在页面加载时先出现变量名闪烁的情况，造成不好的用户体验， 例如：{{ v.name}} (闪一下)=> 张三 用法：html中：<h1v-cloak>{{ v.name }} </h1> 　　　css中：[ v-cloak ] { 　　　　　　　display:none 　　　　　　　} ...
vue中的v-cloak的使用
贤贤的博客
08-04 145
这里写目录标题引言解决用法示例 引言 当我们使用vue时，数据通过插值表达和绑定。网页的渲染(vue实例的编译)需要一定的时间，如果网络比较慢那么在渲染的过程中页面上会显示原始的表达式，如下图，直到vue实例编译完成后才会显示name对应的数据，这样会给用户带来不好的体验 解决 使用vue中的指令，v-cloak 用法 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备
【05】vue.js — v-cloak的使用
有心博客
09-06 1148
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的带有{{ }}或者{{{ }}}标签直到实例准备完毕。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
vue的v-cloak解析
weixin_38291260的博客
04-24 485
1.作用 解决在使用vue绑定数据的时候，渲染页面时会出现变量闪烁，如直接显示{{变量名}} 官方话：这个指令保持在元素上直到关联实例结束编译 2.使用 3.vue1与vue2针对于v-cloak的使用区别 vue1允许v-cloak挂载在body，vue2不允许挂载在body，所以需要放在div使用 . ...
vue中v-cloak 的认识
04-01
v-cloak 是 Vue.js 的一个指令，用于在 Vue 实例渲染完成之前隐藏未被 Vue 实例处理的元素。它通常与 CSS 配合使用，用来解决在 Vue.js 初始化时页面会出现闪烁的问题。当 Vue 实例渲染完成后，v-cloak 指令会自动被...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值