浅谈vue在html中出现{{}}的原因及解决方式
原因：
浏览器渲染机制，解析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="../../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中出现{{}}的原因及解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
uni-app项目中引入Vant UI组件库完美避坑指南（纯净版）
网上百度uniapp使用vant时,很多答案都是在根路径下创建文件夹,而且都是基于小程序环境的,其实uniapp可以直接使用的,这篇文章主要给大家介绍了关于uni-app项目中引入Vant UI组件库完美避坑指南的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了mpvue 如何使用腾讯视频插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
最近接了个项目需要开发一个app项目，由于是第一次接触这种app开发，经过一番思考，决定使用Vue3+Vant前端组件的模式进行开发，下面把问题分析及实现代码分享给大家，需要的朋友参考下吧2021-06-06
本篇文章主要介绍了Vue按需加载的具体实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
vue-cli 是 Vue.js 开发的标准工具,它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程,下面这篇文章主要给大家介绍了关于Vue命令行工具Vue-CLI的相关资料,需要的朋友可以参考下2022-07-07
跨域问题是由浏览器引起的安全限制,而不是Vue框架本身导致的,Vue本身并不限制跨域访问,它只是一个前端框架,负责构建用户界面和处理数据逻辑,本文给大家介绍了在Vue中解决跨域问题的常用方式,需要的朋友可以参考下2023-10-10
这篇文章主要为大家介绍了Vue的监听属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要为大家详细介绍了vue和H5 draggable实现拖拽并替换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
这篇文章主要介绍了vue+vuex+axio从后台获取数据存入vuex，组件之间共享数据,非常具有实用价值，需要的朋友可以参考下2017-04-04
Vue表单验证 trigger:'blur'OR trigger:'change&ap
利用 elementUI 实现表单元素校验时，出现下拉框内容选中后校验不消失的异常校验情形，这篇文章主要介绍了Vue表单验证 trigger:‘blur‘ OR trigger:‘change‘ 区别,需要的朋友可以参考下2023-09-09
最新评论