原因：

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

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

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

{{courseName}}

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

解决办法：

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

[v-cloak]{

display: none;

}

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

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

content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

标题

.hide{

display: none;

}

//初始化vue

initVue()

function initVue() {

new Vue({

el: '#app',

data: function () {

return {

datas:{

courseName:''

}

}

},

mounted() {

//移除隐藏样式

document.querySelector('#app').classList.remove('hide')

}

})

}

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

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

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

具体做法：

先引入文件，

初始化，

然后在vue里面发送emit，

在外面监听on

var event = new EventEmitter();

$(document).ready(function () {

//监听some_event事件

event.on('some_event', function (data) {

});

})

let vm = new Vue({

el: "#app",

methods: {

getList() {

// 触发事件

event.emit('some_event','params');

},

}

});

附上eventEmitter.js

class EventEmitter {

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) {

delete this.event[type];

}

}

}

//移除所有的监听器

removeAllListener() {

this.event = {};

}

}

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