浅谈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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
JavaScript 基本概念
Jan 20 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
Three.js学习之网格
2016/08/10 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
关于Django外键赋值问题详解
2017/08/13 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
python 绘制正态曲线的示例
2020/09/24 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
Linux如何为某个操作添加别名
2013/03/01 面试题
父母对孩子说的话
2014/04/12 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书