淺談vue在html中出現(xiàn){{}}的原因及解決方式
原因：
瀏覽器渲染機(jī)制，解析html結(jié)構(gòu) -> 加載外部腳本和樣式表文件 -> 解析并執(zhí)行腳本代碼 -> 構(gòu)造html dom模型 -> 加載圖片等外部文件 -> 頁(yè)面加載完畢。
初始化vue的js寫(xiě)在頁(yè)面底部，也就是最后才執(zhí)行js腳本。
所以頁(yè)面從頭到尾開(kāi)始渲染時(shí)，渲染到標(biāo)簽時(shí)，由于vue還未初始化，所以就會(huì)顯示類(lèi)似這樣的代碼
<h2>{{courseName}}</h2>
當(dāng)網(wǎng)速很慢的時(shí)候就看得比較清楚，可能會(huì)讓用戶誤以為bug之類(lèi)的，快一點(diǎn)的話就是一閃而過(guò)，體驗(yàn)不是很好
解決辦法：
1、網(wǎng)上說(shuō)的很多都是用v-cloak，
<div v-cloak> {{context}}</div>[v-cloak]{ display: none;}
但是我用了下無(wú)效，可能哪里使用的不對(duì)？然后就干脆按自己的思路實(shí)現(xiàn)了
2、我現(xiàn)在實(shí)現(xiàn)解決的方式，給最外層div加個(gè)class=’hide’(.hide{display: none}，注意這個(gè)樣式要寫(xiě)在head里)，然后在vue初始化完成后，移除這個(gè)類(lèi)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 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ǔ)充知識(shí)：原生js和vue之間的數(shù)據(jù)通訊--EventEmitter
有個(gè)小項(xiàng)目在原來(lái)原生的框架編寫(xiě)，但是不想寫(xiě)原生，就引入了vue
然后有個(gè)需求要和原生的js進(jìn)行交互通訊，于是就可以用node.js EventEmitter
具體做法：
先引入文件<script src='http://www.leifengta.com.cn/js/eventEmitter.js'></script>，
初始化，
然后在vue里面發(fā)送emit，
在外面監(jiān)聽(tīng)on
var event = new EventEmitter();$(document).ready(function () { //監(jiān)聽(tīng)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)聽(tīng) on(type, listener) { if (this.event[type]) { if (this.event[type].length >= this.maxListerners) { console.error(’同一個(gè)監(jiān)聽(tīng)器最多被十個(gè)對(duì)象監(jiān)聽(tīng),否則可能造成內(nèi)存泄漏.n’); return; } if (!this.event[type].includes(listener)) {this.event[type].push(listener); } } else { this.event[type] = [listener]; } } //發(fā)送監(jiān)聽(tīng) emit(type, ...rest) { if (this.event[type]) { this.event[type].map(fn => fn.apply(this, rest)); } } //移除監(jiān)聽(tīng)器 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)聽(tīng)器 removeAllListener() { this.event = {}; }}
以上這篇淺談vue在html中出現(xiàn){{}}的原因及解決方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. PHP基礎(chǔ)之生成器4——比較生成器和迭代器對(duì)象2. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建（ Postfix ）3. Docker 啟動(dòng)Redis 并設(shè)置密碼的操作4. ASP新手必備的基礎(chǔ)知識(shí)5. asp文件用什么軟件編輯6. 利用CSS制作3D動(dòng)畫(huà)7. Spring如何替換掉默認(rèn)common-logging.jar8. vue+element開(kāi)發(fā)一個(gè)谷歌插件的全過(guò)程9. JS中6個(gè)對(duì)象數(shù)組去重的方法10. Vue axios獲取token臨時(shí)令牌封裝案例
網(wǎng)公網(wǎng)安備