<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .loading{ /*vw/vh：v代表viewport，w和h分别代表宽高*/ width: 100vw; height: 100vh; background-image: url(img/fire.gif); background-repeat:no-repeat ; background-position: center center; background-color: #fff; position: fixed; left: 0; top: 0; z-index: 1000000; } </style> </head> <body> <div class="loading"></div> <div id="app"> <!--v-for完成循环内容--> <h1 v-for="item,index in newsList"> {{index}}-{{item}} </h1> <h1 v-if="vip"> 我是VIP </h1> <h1 v-else> 我是普通用户 </h1> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* * 1/载入vue文件 * 2/设置<div id=app></div> * 3/初始化vue */ var app = new Vue({ el:"#app",//vue项目的位置 //显示在视图上的数据 data:{ newsList:["新闻1","新闻2","新闻3"], vip:false }, //在vue视图上要设置的方法 methods:{ }, mounted:function(){ console.log("当调用起这个函数的时候，说明数据已经渲染在页面上了") document.querySelector(".loading").style.display = "none"; } }) </script> </body> </html>