淺談vue在html中出現(xiàn){{}}的原因及解決方式

更新時(shí)間：2020年11月16日 09:22:46 作者：Cassie、

這篇文章主要介紹了淺談vue在html中出現(xiàn){{}}的原因及解決方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

原因：

瀏覽器渲染機(jī)制，解析html結(jié)構(gòu) -> 加載外部腳本和樣式表文件 -> 解析并執(zhí)行腳本代碼 -> 構(gòu)造html dom模型 -> 加載圖片等外部文件 -> 頁面加載完畢。

初始化vue的js寫在頁面底部，也就是最后才執(zhí)行js腳本。

所以頁面從頭到尾開始渲染時(shí)，渲染到標(biāo)簽時(shí)，由于vue還未初始化，所以就會顯示類似這樣的代碼

<h2>{{courseName}}</h2>

當(dāng)網(wǎng)速很慢的時(shí)候就看得比較清楚，可能會讓用戶誤以為bug之類的，快一點(diǎn)的話就是一閃而過，體驗(yàn)不是很好

解決辦法：

1、網(wǎng)上說的很多都是用v-cloak，

<div id="app" v-cloak>
  {{context}}
</div>
[v-cloak]{
  display: none;
}

但是我用了下無效，可能哪里使用的不對？然后就干脆按自己的思路實(shí)現(xiàn)了

2、我現(xiàn)在實(shí)現(xiàn)解決的方式，給最外層div加個(gè)class='hide'(.hide{display: none}，注意這個(gè)樣式要寫在head里)，然后在vue初始化完成后，移除這個(gè)類hide，大概代碼如下

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport"
  content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
 <title>標(biāo)題</title>
 <style>
  .hide{
   display: none;
  }
 </style>
</head>
<body>
 <div id="app" class="hide">
  <h2>{{courseName}}</h2>
 </div>
 <script>
  //初始化vue
  initVue()
 
  function initVue() {
   new Vue({
    el: '#app',
    data: function () {
     return {
      datas:{
       courseName:''
      }
     }
    },
    mounted() {
     //移除隱藏樣式
     document.querySelector('#app').classList.remove('hide')
    }
   })
  }
 </script>
</body>

補(bǔ)充知識：原生js和vue之間的數(shù)據(jù)通訊--EventEmitter

有個(gè)小項(xiàng)目在原來原生的框架編寫，但是不想寫原生，就引入了vue

然后有個(gè)需求要和原生的js進(jìn)行交互通訊，于是就可以用node.js EventEmitter

具體做法：

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

初始化，

然后在vue里面發(fā)送emit，

在外面監(jiān)聽on

var event = new EventEmitter();
$(document).ready(function () {
  //監(jiān)聽some_event事件
  event.on('some_event', function (data) {
    
  });
}）
 
let vm = new Vue({
  el: "#app",
  methods: {
    getList() {
      // 觸發(fā)事件
      event.emit('some_event','params');
    },
  }
});

附上eventEmitter.js

class EventEmitter {
 constructor() {
  this.event = {};
  this.maxListerners = 10;
 }
 // 監(jiān)聽
 on(type, listener) {
  if (this.event[type]) {
   if (this.event[type].length >= this.maxListerners) {
    console.error('同一個(gè)監(jiān)聽器最多被十個(gè)對象監(jiān)聽,否則可能造成內(nèi)存泄漏.\n');
    return;
   }
      if (!this.event[type].includes(listener)) {
        this.event[type].push(listener);
      }
  } else {
   this.event[type] = [listener];
  }
 }
 //發(fā)送監(jiān)聽
 emit(type, ...rest) {
  if (this.event[type]) {
   this.event[type].map(fn => fn.apply(this, rest));
  }
 }
 //移除監(jiān)聽器
 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];
      }
  }
 }
 //移除所有的監(jiān)聽器
 removeAllListener() {
  this.event = {};
 }
}

以上這篇淺談vue在html中出現(xiàn){{}}的原因及解決方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: