浅谈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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
JavaScript 页面坐标相关知识整理
Jan 09 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
angular+webpack2实战例子
May 23 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
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
destoon找回管理员密码的方法
2014/06/21 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP调用其他文件中的类
2018/04/02 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
node 版本切换的实现
2020/02/02 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
Python字典简介以及用法详解
2016/11/15 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
怎样创建、运行java程序
2014/08/01 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
市场营销专业毕业生自荐信
2013/11/02 职场文书
硕士研究生自我鉴定
2013/11/08 职场文书
应届毕业生求职信
2013/11/30 职场文书
会议接待欢迎词
2014/01/12 职场文书
公司薪酬管理制度
2014/01/31 职场文书
优秀护士获奖感言
2014/02/20 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
springboot中的pom文件 project报错问题
2022/01/18 Java/Android