在Vue中的load或ready的加载时机

1、我们来插入一段代码来分析：

Js代码如下

  <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data: {},

                mounted: function () {

                    var interval = 2000;

                    Resize();

                    Map();

                    setInterval("Map()", interval);

                    dateTimer();

                    setInterval("dateTimer()", 1000);

                    $(window).resize(function () {

                        location.reload();

                    });

                }

            })

        </script>

　　对代码的解读，mounted函数为页面加载完毕执行的函数。添加监视等工作。

html代码：

<body class="container-fluid" >

    <div id="app">

    </div>

</body>

我们在body下的顶层设定一个id为app的div，而且必须在body下声明一个顶级DIV元素或者其他的根元素。

在Vue中的load或ready的加载时机的更多相关文章

  1. 在vue中使用Echarts画曲线图(异步加载数据)

    现实的工作中, 数据不可能写死的,所有的数据都应该通过发送请求进行获取. 所以本项目的需求是请求服务器获得二维数组,并生成曲线图.曲线图的横纵坐标均从获得的数据中取得. Echarts官方文档: ht ...

  2. 在vue中运用mt-loadmore 实现上拉加载，下拉刷新（完整源码）

    <template> <div class="serverList"> <ul class="scrollModeBox" :st ...

  3. 在vue中运用mt-loadmore 实现上拉加载，下拉刷新

    元旦了,给手残党直接复制的机会,代码如下: 1. :style="{'-webkit-overflow-scrolling': scrollMode}" 最外层div设置,以便兼容 ...

  4. 使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题

    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...

  5. 使用jquery的load方法设计动态加载，并解决浏览器前进、后退、刷新等问题

    继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后 ...

  6. vue+elementUI+axios实现的全局loading加载动画

    在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...

  7. Vue(基础七）_webpack(webpack异步加载原理)

    ---恢复内容开始--- 一.前言 1.webpack异步加载原理’                                           2.webpack.ensure原理     ...

  8. vue（组件、路由）懒加载

    const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) le ...

  9. WPF中，怎样将XAML代码加载为相应的对象？

    原文:WPF中,怎样将XAML代码加载为相应的对象? 在前面"在WPF中,如何得到任何Object对象的XAML代码?"一文中,我介绍了使用System.Windows.Marku ...

随机推荐

  1. 【优秀的Sketch插件】PaintCode for Sketch for Mac 1.1

    [简介] PaintCode for Sketch 是一款结合了PaintCode和Sketch两款软件强大功能的插件,今天和大家分享最新的1.1版本,支持Sketch 40+版本,这个插件能够让你的 ...

  2. vmware centos7 网络配置

    1. 在vmware创建centos虚拟机 2. 在cmd下看一下本机所处的网段,并对一下vmware上的配置 如果同样处于同一网段(192.168.aaa.bbb,aaa处一致就行),就可以直接开机 ...

  3. kubernetes1.5.2 DNS

    Cluster DNS主要包含如下几项: SkyDNS :提供DNS解析服务. Etcd :用于DNS的存储. Kube2sky :监听Kubernetes,当有新的Service创建时,将其注册到e ...

  4. angular学习—组件

    组件: vue组件:xxx.vue react组件:xxx.js+xxx.css angular组件:xxx.ts+xxx.css+xxx.html angular的装饰器: @ngModule:an ...

  5. 8种提升ASP.NET Web API性能的方法

    英文原文:8 ways to improve ASP.NET Web API performance ASP.NET Web API 是非常棒的技术.编写 Web API 十分容易,以致于很多开发者没 ...

  6. std::rotate使用

    1. 进行元素范围上的左旋转 first - 原范围的起始 n_first - 应出现在旋转后范围起始的元素 last - 原范围的结尾 原来:1 2 3 左旋转后(起始元素是2) : 2 3 1

  7. SVN快速入门笔记【转】

    1. SVN版本控制软件目的 协作开发 远程开发 版本回退 2. 什么是SVN subVersion 支持平台操作 支持版本回退 3. 获取SVN软件 属于C/S结构软件(客户端与服务端) serve ...

  8. time 模块 与 datetime 模块

    3 print(time.time()) # 时间戳:1487130156.419527 4 print(time.strftime("%Y-%m-%d %X")) #格式化的时间 ...

  9. maven项目的聚合与继承

    maven项目的聚合与继承: 一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1.1.聚合配置代码 1 <modules> 2 <module>模 ...

  10. [Android] Android RxBus 用法学习总结

    事件总线的好处在于方便组件之间的交互,RxBus不是一个库,而是使用RxJava实现事件总线的一种思想. rxbus和eventbus相比较: RxJava 主要做异步.网络的数据处理,强大之处就是对 ...