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

最新推荐文章于 2024-07-13 17:00:16 发布

川北先生

最新推荐文章于 2024-07-13 17:00:16 发布

阅读量2.9k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53571731/article/details/127252161

版权

因为html的加载顺序如下：解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕。
　　所以，当html加载的时候，就会把{{}} 当成文本加载出来，当vue初始化完成后，才会把{{}}解析成vue的语法，所以就会出现html页面加载时会显示{{代码}}的问题。
　　如果把引入vue.js的script放到head里面，那页面不会出现{{}}，因为在body之前就把vue引入进来了，vue加载完成了。

还有一种就是使用v-cloak

<html>
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <!--格式如下可-->
    <script src="js/vue.js"></script>
</head>
<body>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

川北先生

关注关注

1
点赞
踩
5

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

浅谈vue在html中出现{{}}的原因及解决方式

01-21

原因：浏览器渲染机制，解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕。初始化vue的js写在页面底部，也就是最后才执行js脚本。所以页面从头到尾开始渲染时，渲染到标签时，由于vue还未初始化，所以就会显示类似这样的代码 <h2>{{courseName}}</h2> 当网速很慢的时候就看得比较清楚，可能会让用户误以为bug之类的，快一点的话就是一闪而过，体验不是很好解决办法： 1、网上说的很多都是用v-cloak， <div id=app> {{con

vue 防止页面加载时看到花括号的解决操作

01-18

如下所示： <style> [v-cloak]{ display:none } </style> v-cloak v-text v-html v-cloak用于大段 v-text用于单个标签 v-html用于带有标签的处理补充知识：vue花括号数据绑定不成功的问题我就废话不多说了，大家还是直接看案例吧~ <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> </head> <script src=js/vue.js type=text/javascr

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

Vue中如何以HTML形式显示内容并动态生成HTML代码

Yeats_Liao的博客

01-30

3474

Vue中如何以HTML形式显示内容并动态生成HTML代码

Vue项目代码高亮篇（含VueQuil中代码部分高亮显示）

最新发布

2301_76380626的博客

07-13

708

前端项目代码高亮

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

Jie0817的博客

01-25

1972

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

vue在html中出现{{}}的原因及解决办法

m0_60898924的博客

12-14

923

vue在html中出现{{}}的原因及解决办法

Vue - 页面初始化显示 {{ }} 优化方式

CodingmanNAN的博客

01-29

736

在加载前先隐藏页面元素，等待Vue对象解析完成后，修改状态数据，借助数据双向绑定，修改页面样式

vue 出现 {{}}

weixin_45042694的博客

03-01

248

1. <app style="display: none;" :style="{display: 'block'}"></app> 2. v-html

vue加载显示{{xxx}}的解决方法

prayer的博客

07-28

9408

一般vue.js文件放在最后，由于浏览器是从头到尾的渲染机制，在没有读取到识别符对应的js控制语句就会直接显示{{xxx}} 这个问题可以用vue的一个特点解决，就是Vue会自动屏蔽掉自定义属性我们可以为对应的dom节点添加一个自定义属性，比如 dom-hidden（官方：v-cloak）然后css定义： [dom-hidden]{ display:none;} 这个属性在vu...

vue页面加载闪烁问题的解决方法

08-27

本文主要介绍了 vue 页面加载闪烁问题的解决方法，包括 v-if 和 v-show 的区别、解决 vue 页面加载时出现 {{message}} 闪退的两种方法，以及 vue 页面加载进度条组件的实现。一、v-if 和 v-show 的区别 v-if 和 v...

解决vue单页面应用进入页面加载所有 js 的问题

10-14

本文将探讨如何解决Vue单页面应用进入页面时加载所有JS的问题。首先，问题的根源在于Webpack的打包机制。在传统的Vue配置中，所有的页面和组件通常在`index.js`等入口文件中被预先导入，导致浏览器一次性加载所有...

vue页面加载时的进度条功能(实例代码)

10-15

页面加载时显示进度条能够给用户一种应用响应快速的错觉，从而提升整体的用户体验。尤其在页面跳转频繁的场景下，进度条的使用可以极大地缓解用户的等待焦虑感。 2. **nprogress插件介绍**： nprogress是一个非常...

VUE页面中加载外部HTML的示例代码

08-29

VUE页面中加载外部HTML的示例代码本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，主要通过使用VUE的v-html指令来加载外部的HTML文件，并使用axios进行GET请求来获取外部HTML文件的内容。该示例代码中使用了...

在vue项目中页面加载的时候不显示{{}}

qq_33101025的博客

04-30

1488

在vue项目中页面加载的时候不显示{{}} https://blog.csdn.net/slqt_6688/article/details/83027888 实测有效

Vue 在页面上显示{{}}双大括号，不解析

Ccuurree的博客

04-10

1230

Mustache 语法想要不对花括号进行解析，显示在页面，可以使用v-pre跳过这个元素和它的子元素的编译过程。

vue项目加载会出现花括号{{}}的解决方法

m-dididid的博客

04-08

2544

使用v-cloak指令这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 <div v-cloak> {{ message }} </div> [v-cloak] { display: none; } 使用v-text指令更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustac

vue页面加载前显示{{代码}}的原因及解决办法

qq_19316267的博客

09-25

3978

在刚开始接触vue的时候，我们都是直接用对于一个初学者来说，跟着文档慢慢搬砖，使用vue进行数据绑定。记得在最开始使用vue写公司项目的时候，在页面初始化化是，THML会闪现出{{}}，当时测试问我有没有解决办法，我理直气壮的说这是vue的特性，没有办法解决这个问！想想当时也是傻，其实官方文档又给出解决办法，只是当时学习的时候，走马观花，没有仔细的阅读文档和demo例子。后面同事说有解...

vue项目中加载慢的时显示{{}}

freewlt

11-26

535

/*css样式*/ [v-cloak] {display: none;}  <div id="app" v-cloak><ul><li v-for="item in tabs">{{item.text}}</li></ul></div> //js代码 new Vue({ ...

优化Vue首页加载：解决白屏与加载慢问题

当Vue项目打包上线后，用户可能会遇到首页加载缓慢、出现白屏的问题。这个问题主要源于几个方面： 1. **文件加载时间过长**：控制台查看发现app.js和vendor.js这两个核心文件加载时间较长，这可能是由于代码体积...