v-cloak 遮盖

v--cloak 遮盖

1.这个指令保持在元素上直到关联实例结束编译
2.因为指令生命周期的特殊性,常备用来解决大胡子语法闪烁问题

解决大胡子语法闪烁案例

1.一般把v--cloak 绑在Vue实例el属性绑定的节点上
2.在css样式中加上:
[v-cloak] {
display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        {{msg}}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"网速过慢加载时候解决大胡子语法闪烁问题"
            }
        })
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,629评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,081评论 0 29
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,979评论 1 4
  • vue.js 谁在影响着页面?model中的data Vue.js 官网 api学习步骤引文件写结构初始化js 简...
    Ht_何甜阅读 566评论 0 0
  • vue实战开发 分享指南 1.渐进式框架2.vue中两个核心点3.虚拟DOM4.MVVM模式5.vue实例6.声明...
    2点半阅读 1,263评论 0 4