vue 

<!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>

 

posted @ 2019-06-22 16:29  茫茫林海  阅读(107)  评论(0)    收藏  举报