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

原因：

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

初始化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.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中出现{{}}的原因及解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。