当前位置: 首页 > 编程笔记 >

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

羊丰茂
2023-03-14
本文向大家介绍浅谈vue在html中出现{{}}的原因及解决方式,包括了浅谈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中出现{{}}的原因及解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍详谈php ip2long 出现负数的原因及解决方法,包括了详谈php ip2long 出现负数的原因及解决方法的使用技巧和注意事项,需要的朋友参考一下 php提供了ip2long与long2ip方法对ip地址处理。 1、ip2long — 将一个IPV4的字符串互联网协议转换成数字格式 int ip2long ( string $ip_address ) 参数: ip_addres

  • 本文向大家介绍java 出现NullPointerException的原因及解决办法,包括了java 出现NullPointerException的原因及解决办法的使用技巧和注意事项,需要的朋友参考一下 java 出现NullPointerException的原因及解决办法 日常开发过程中,最常见的异常莫过于NullPointerException,之前的时候,只是知道去找到报错的位置,然后去解决

  • 本文向大家介绍MySQL 出现错误1418 的原因分析及解决方法,包括了MySQL 出现错误1418 的原因分析及解决方法的使用技巧和注意事项,需要的朋友参考一下 MySQL 出现错误1418 的原因分析及解决方法 具体错误:  使用mysql创建、调用存储过程,函数以及触发器的时候会有错误符号为1418错误。 ERROR 1418 (HY000): This function has none

  • 本文向大家介绍浅谈十个常见的Java异常出现原因,包括了浅谈十个常见的Java异常出现原因的使用技巧和注意事项,需要的朋友参考一下 异常是 Java 程序中经常遇到的问题,我想每一个 Java 程序员都讨厌异常,一 个异常就是一个 BUG,就要花很多时间来定位异常问题。 1、NullPointerException 空指针异常,操作一个 null 对象的方法或属性时会抛出这个异常。具体看上篇文章:

  • 本文向大家介绍java编译后的文件出现xx$1.class的原因及解决方式,包括了java编译后的文件出现xx$1.class的原因及解决方式的使用技巧和注意事项,需要的朋友参考一下 java编译后的文件名字带有$接数字的就是匿名内部类的编译结果,接名字的就是内部类的编译结果 例如: TestFrame$1.class是匿名内部类的编译结果,TestFrame$MyJob.class则是内部类My

  • 本文向大家介绍Java String.replace()方法"无效"的原因及解决方式,包括了Java String.replace()方法"无效"的原因及解决方式的使用技巧和注意事项,需要的朋友参考一下 首先我们来看个例子 运行结果是什么呢?我们先看看这个方法的api 返回一个新的字符串,用newChar替换此字符串中出现的所有oldChar 所以这里的结果为:输出结果是abcd 而不是fbcd,