浅谈vue在html中出现{{}}的原因及解决方式


Posted in Javascript onNovember 16, 2020

原因:

浏览器渲染机制,解析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中出现{{}}的原因及解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
js更优雅的兼容
Aug 12 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
vue组件中传值EventBus的使用及注意事项说明
Nov 16 #Javascript
小程序自定义弹框效果
Nov 16 #Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 #Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 #Javascript
小程序实现上下切换位置
Nov 16 #Javascript
小程序实现点击tab切换左右滑动
Nov 16 #Javascript
微信小程序实现滚动Tab选项卡
Nov 16 #Javascript
You might like
php提取字符串中网站url地址的方法
2014/12/03 PHP
php简单统计中文个数的方法
2016/09/30 PHP
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
Python中字典和集合学习小结
2017/07/07 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
出纳岗位职责模板
2013/11/27 职场文书
总经理的岗位职责
2014/02/23 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
单位政审意见范文
2015/06/04 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android