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>                    

  

vue在html中出现{{}}原因及解决办法

上一篇:在已经编译安装好php7场景下安装curl扩展


下一篇:webshell 防治暴力ddos