原因:
浏览器渲染机制,解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕。
初始化vue的js写在页面底部,也就是最后才执行js脚本。
所以页面从头到尾开始渲染时,渲染到标签时,由于vue还未初始化,所以就会显示类似这样的代码
<h2>{{courseName}}</h2>
当网速很慢的时候就看得比较清楚,可能会让用户误以为bug之类的,快一点的话就是一闪而过,体验不是很好
解决办法:
1、网上说的很多都是用v-cloak,
<div id="app" 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 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>
补充知识:原生js和vue之间的数据通讯--EventEmitter
有个小项目在原来原生的框架编写,但是不想写原生,就引入了vue
然后有个需求要和原生的js进行交互通讯,于是就可以用node.js EventEmitter
具体做法:
先引入文件<script src="/UploadFiles/2021-04-02/eventEmitter.js">
初始化,
然后在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中出现{{}}的原因及解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]