zoukankan      html  css  js  c++  java
  • 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>                    
    

      

  • 相关阅读:
    国外大学公开课
    普瑞马法则
    在一个整数区间里产生一组不重复的随机数
    arm架构下树莓派 运行javafx流程
    Windows 如何在cmd命令行中查看、修改、删除与添加环境变量
    我来了!
    IIS替代方案:Visual Studio自带的WebServer
    网络收藏夹DEMO
    Web收藏夹
    LazyGuy的BLOG搬迁至CNBLOGS
  • 原文地址:https://www.cnblogs.com/qiufang/p/13055864.html
Copyright © 2011-2022 走看看