使用VUE写的前端页面，刷新时出现源代码

最新推荐文章于 2022-10-10 20:54:42 发布

paradise0813

最新推荐文章于 2022-10-10 20:54:42 发布

阅读量1.1k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_38693333/article/details/119678733

版权

问题

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码，如图所示：

解决方案

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

<body>
    <div v-cloak>{{certificationForm.grade}}</div>
</body>

style: 

[v-cloak]{
    display: none;
}

即可解决该问题。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

paradise0813

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

前端网页技术之 Vue

cgblpx的博客

08-02

5万+

文章目录VueVue概念同类产品官网特点渐进式框架入门案例.html改造入门案例.htmlMVVM框架基础语法运算符 operator方法 methodsVue解析数据三种data值的写法高级用法：v-命令指令集双向绑定 v-model闪现 v-cloak判断 v-if循环 v-for事件 v-on绑定 v-bind小结Vue组件概述使用测试Vue路由概述使用步骤入门案例Vue的AjaxAjax概述Ajax原理axios测试常见错误Vue的生命周期lifecycle概述测试扩展：观察者设计模式HBuilde

3、vue 动态渲染图片不显示

qq_43149187的博客

08-04

578

代码】vue 动态渲染图片不显示。

参与评论您还未登录，请先登录后发表或查看评论

快速解决 vue 项目 build 打包之后出现源代码的问题

一只奋斗的猪

09-30

4308

浏览器通过按F12 然后打开控制台，点击 Source ，再点击 webpack:// ，点击相应的 vue 文件，竟然发现了 vue 的代码竟然完全显示出来了，啊这。。。。好吧，有点坑了，而且官方的文档中也没有说（或许我自己太菜了）。其实这样是为了方便前端程序员在正式环境调试用的，默认是开启的，在 vue 的学习官网没有过多的介绍，因为使用的是 vue-cli 进行打包，所以在 vue-cli 文档中有介绍，具体查看 https://cli.vuejs.org/zh/config/#productio

解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题

weixin_30758821的博客

03-12

1457

解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题： <style> [v-cloak]{ display: none; } </style> <div id="app" v-cloak> 　　<h1>{{ msg }}</h1> </div&g...

v-cloak针对vue项目刷新时候会显示{{message}}源码的问题、和会闪屏已经隐藏的模态框的问题等解决

chelflan's blog

06-23

456

问题的出现 vue项目刷新时候会显示{{message}}源码的问题、和会闪屏已经隐藏的模态框的问题等，这非常影响用户体验 <div id="app"> <p> {{message}}</p> </div> 此时页面展示的效果就是：在加载的时候会看到 {message}} 在页面出现，过了几秒之后才会渲染数据解决如下 ...

解决vue 加载时源码显示问题

Jie0817的博客

01-25

2003

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

【JavaScript源代码】vue列表数据删除后主动刷新页面及刷新方法详解.docx

12-29

在Vue.js应用中，当你需要在执行特定操作如删除或添加数据后刷新页面时，通常前端不会自动更新，因为Vue采用的是数据驱动视图的模式，仅当数据变化时才会更新视图。在这种情况下，我们可以采取手动刷新页面的方法。...

【JavaScript源代码】vue移动端项目中如何实现页面缓存的示例代码.docx

12-29

Vue.js 是一款流行的前端框架，尤其适用于开发单页面应用程序（SPA）。在移动端项目中，页面缓存是一个重要的功能，能够优化用户体验，减少不必要的数据加载。本文将详细介绍如何在 Vue 移动端项目中利用 `keep-...

江哥带你玩转Vue3源代码

06-01

总的来说，"江哥带你玩转Vue3源代码"的课程将带你深入探索Vue3的底层实现，理解其设计理念，掌握新特性，提升你在现代前端开发中的竞争力。通过学习和实践，你将能够利用Vue3的强大功能构建更高效、更可维护的应用。

Vue版模拟饿了么网站源代码.zip

最新发布

11-13

Vue.js 是一款轻量级的前端JavaScript框架，以其组件化、...通过分析这个Vue版模拟饿了么网站源代码，开发者可以深入了解Vue.js的实践应用，提升前端开发技能，并学习到项目架构、状态管理、数据交互等多个方面的知识。

解决Vue页面加载时显示{{代码}}问题

weixin_53571731的博客

10-10

2977

解决页面显示时出现vue{{代码}}的情况

vue 进页面能看见源代码

啧⃝啧⃝啧⃝的博客

12-21

1866

网络慢来不及渲染能看见源代码

解决vue 渲染时显示源码

qq_29069777的博客

10-24

664

css部分 [v-cloak]{display: none} html部分 <div id="app" v-cloak> </div> ...

我是如何看Vue源码的

包磊磊的博客

08-15

2840

前言关于vue响应式的文章其实已经挺多了，不过大多都在浅尝辄止，基本就是简单介绍一下Object.defineProperty，覆盖一下setter做个小demo就算解决，好一点的会帮你引入observe、watcher、dep的概念，以及加入对Array的特殊处理，所以本篇除了上述以外，更多的重心将放在setter引发render的机制与流程上，然后结合这个这个响应式机制解析vue中的watch和computed语法实现文章分为两部分，第一部分会简单介绍vue实例构建流程，第二部分则深入探究响应式

解决使用Vue.js显示数据的时,页面闪现原始代码的问题

qq_42396791的博客

08-16

1426

今天开始学习Vue.js的使用，但是在学习过程中发现一个问题，那就是页面加载数据时，原始代码会闪现一下。查访各方资料，终的解决方法。第一步、加入一段css代码 1 2 3 4 5 <style type="text/css"> [v-cloak] { display: none; ...

解决html+vue方式开发时页面加载时闪过{{页面标签}}等现象

weixin_43734732的博客

11-12

707

<el-form-item :label=`选项${index+1}_描述` prop="idec"> <span v-cloak>{{item.describes}}</span> </el-form-item> <el-form-item :label=`选项${ind...

vue中实现刷新当前页面（亲测有效）

小剑儿的博客

09-24

5285

业务场景： vue项目中遇到对当前页面进行数据操作时需要实时更新数据，页面需要刷新；在jquery里面可以使用location.reload()方法，刷新页面；在vue中，使用this.$router.go(0)也能实现刷新，但是会出现短暂空白，用户体验效果不好，所以可以尝试使用provide / inject 这对用例这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论...

vue中html显示的问题

warrah 南极狼

03-27

4434

描述内容是用富文本框编辑的，实际的内容如下：实际这里的多行省略是没有效果的，因为他不是纯文本，而是html标签。 <div class="main" v-html="book.description"> </div> .main{ height:140px; font-size: 8px; text-overflow: -o-ellipsis-lastline; // 多行省略

Vue个人博客系统源代码解析与实践

项目中可能还包含了一些其他前端技术，例如使用了Vue Router来处理前端路由，这使得用户在不刷新页面的情况下即可跳转到不同的组件视图。使用Vuex来管理应用状态，对于大型单页应用(SPA)来说，状态管理是不可或缺的...