浅谈vue在html中出现{{}}的原因及解决方式
原因：
浏览器渲染机制，解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕。
初始化vue的js写在页面底部，也就是最后才执行js脚本。
所以页面从头到尾开始渲染时，渲染到标签时，由于vue还未初始化，所以就会显示类似这样的代码
<h2>{{courseName}}</h2>
当网速很慢的时候就看得比较清楚，可能会让用户误以为bug之类的，快一点的话就是一闪而过，体验不是很好
解决办法：
1、网上说的很多都是用v-cloak，
<div v-cloak> {{context}}</div>[v-cloak]{ display: none;}
但是我用了下无效，可能哪里使用的不对？然后就干脆按自己的思路实现了
2、我现在实现解决的方式，给最外层div加个class=’hide’(.hide{display: none}，注意这个样式要写在head里)，然后在vue初始化完成后，移除这个类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>标题</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>
补充知识：原生js和vue之间的数据通讯--EventEmitter
有个小项目在原来原生的框架编写，但是不想写原生，就引入了vue
然后有个需求要和原生的js进行交互通讯，于是就可以用node.js EventEmitter
具体做法：
先引入文件<script src='https://www.haobala.com/js/eventEmitter.js'></script>，
初始化，
然后在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中出现{{}}的原因及解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。
相关文章：
网公网安备