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

原因：

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

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

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

<h2>{{coursename}}</h2>

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

解决办法：

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

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

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

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

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

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

具体做法：

先引入文件<script src="../../js/eventemitter.js"></script>，

初始化，

然后在vue里面发送emit，

在外面监听on

附上eventemitter.js

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