好资源导航 » 文章资讯 » 浅谈vue在html中出现{{}}的原因及解决方式

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

2023-07-11 17:34:06 65

原因：

浏览器渲染机制，解析html结构->加载外部脚本和样式表文件->解析并执行脚本代码->构造htmldom模型->加载图片等外部文件->页面加载完毕。

初始化vue的js写在页面底部，也就是最后才执行js脚本。

所以页面从头到尾开始渲染时，渲染到标签时，由于vue还未初始化，所以就会显示类似这样的代码

{{courseName}}

当网速很慢的时候就看得比较清楚，可能会让用户误以为bug之类的，快一点的话就是一闪而过，体验不是很好

解决办法：

1、网上说的很多都是用v-cloak，


{{context}}

[v-cloak]{ display:none; }

但是我用了下无效，可能哪里使用的不对？然后就干脆按自己的思路实现了

2、我现在实现解决的方式，给最外层div加个class='hide'(.hide{display:none}，注意这个样式要写在head里)，然后在vue初始化完成后，移除这个类hide，大概代码如下








标题




{{courseName}}

补充知识：原生js和vue之间的数据通讯--EventEmitter

有个小项目在原来原生的框架编写，但是不想写原生，就引入了vue

然后有个需求要和原生的js进行交互通讯，于是就可以用node.jsEventEmitter

具体做法：

先引入文件，

初始化，

然后在vue里面发送emit，

在外面监听on

varevent=newEventEmitter();
$(document).ready(function(){
//监听some_event事件
event.on('some_event',function(data){

});
}）

letvm=newVue({
el:"#app",
methods:{
getList(){
//触发事件
event.emit('some_event','params');
},
}
});

附上eventEmitter.js

classEventEmitter{
constructor(){
this.event={};
this.maxListerners=10;
}
//监听
on(type,listener){
if(this.event[type]){
if(this.event[type].length>=this.maxListerners){
console.error('同一个监听器最多被十个对象监听,否则可能造成内存泄漏.\n');
return;
}
if(!this.event[type].includes(listener)){
this.event[type].push(listener);
}
}else{
this.event[type]=[listener];
}
}
//发送监听
emit(type,...rest){
if(this.event[type]){
this.event[type].map(fn=>fn.apply(this,rest));
}
}
//移除监听器
removeListener(type,func){
if(this.event[type]){
this.event[type]=this.event[type].filter(item=>item!==func);
if(this.event[type].length===0){
deletethis.event[type];
}
}
}
//移除所有的监听器
removeAllListener(){
this.event={};
}
}

以上这篇浅谈vue在html中出现{{}}的原因及解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

{{courseName}}

{{courseName}}

热门推荐

随机推荐