Vue.js 中的 v-cloak 指令

叁歲伎倆 2022-10-07 00:44 24阅读 0赞

可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

<div id="app">
        { { context}}
    </div>
    <script>
        var app = new Vue({ 
            el: '#app',
            data: { 
                context:'互联网头部玩家钟爱的健身项目'
            }
        });
    </script>

界面会显示content的变量，闪动后更新“互联网头部玩家钟爱的健身项目”变量值  
我们使用 v-cloak 指令来解决屏幕闪动的问题吧O(∩\_∩)O~

js 不变，在 div 中加入 v-cloak 指令。

<div id="app" v-cloak>
        { { context}}
    </div>
    <script>
        var app = new Vue({ 
            el: '#app',
            data: { 
                context:'互联网头部玩家钟爱的健身项目'
            }
        });
    </script>
    <style>
    [v-cloak]{ 
        display: none;
    }
    </style>

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。  
[https://www.jianshu.com/p/f56cde007210?utm\_source=oschina-app][https_www.jianshu.com_p_f56cde007210_utm_source_oschina-app]

[https_www.jianshu.com_p_f56cde007210_utm_source_oschina-app]: https://www.jianshu.com/p/f56cde007210?utm_source=oschina-app

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vuejs】Vuejs 中避免滥用 this 读取 data 中数据

![0974f3162e9813dc5f58074756139b49.png][] 作者：红尘炼心 https://juejin.cn/post/6934911314871

本是古典何须时尚/ 2022年10月19日 05:43/ 0 赞/ 221 阅读

相关 Vuejs——（８）Vuejs组件的定义

本篇资料来于官方文档： http://cn.vuejs.org/guide/components.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。

怼烎@/ 2022年07月18日 01:52/ 0 赞/ 362 阅读

相关 Vuejs——（6）Vuejs与form元素

资料来于官方文档： http://cn.vuejs.org/guide/forms.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。简单来说，更

深藏阁楼爱情的钟/ 2022年07月18日 00:14/ 0 赞/ 342 阅读

相关 Vuejs——（2）Vue生命周期，数据，手动挂载，指令，过滤器

原教程： http://cn.vuejs.org/guide/instance.html http://cn.vuejs.org/guide/syntax.html

小鱼儿/ 2022年07月17日 01:08/ 0 赞/ 193 阅读

相关 vuejs的组件

组件的基本使用注册组件组件注册就是利用`Vue.component()`方法，先传入一个自定义组件的名字，然后传入这个组件的配置。 Vue.compo

╰+哭是因爲堅強的太久メ/ 2022年05月24日 06:50/ 0 赞/ 333 阅读

相关 VueJS入门教程之七：自定义指令（detective）

除了核心功能默认内置的指令 (`v-model` 和 `v-show`)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情

桃扇骨/ 2022年04月21日 14:50/ 0 赞/ 195 阅读

相关 Vuejs

1. 入门案例 1. 创建vuejs-demo.html <!DOCTYPE html> <html> <he

灰太狼/ 2021年12月21日 19:23/ 0 赞/ 385 阅读

相关【Vue 学习】- VueJS 常用系统指令

目录 1 v-on 指令 1.1 v-on:click 1.2 v-on:keydown 1.3 v-on:mouseover 1.4 事件修饰符 1.5 按键修饰

太过爱你忘了你带给我的痛/ 2021年09月21日 00:56/ 0 赞/ 624 阅读

相关 Vuejs 中常用的工具函数

1. isUndef > 判断参数是否是 undefined 或者是 null function isUndef (v) { return v

柔情只为你懂/ 2021年09月07日 16:00/ 0 赞/ 544 阅读

相关 Vuejs基本知识(六)【模板指令directive】

视图中的`Directive` (指令) 我们在学习java的时候，知道有`jsp` 页面，对于`.net`语言，有 `.asp, aspx`页面，对于`ruby`,

阳光穿透心脏的1/2处/ 2021年06月26日 16:06/ 0 赞/ 422 阅读