在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. pickle详解

    一.简介 在机器学习中,我们常常需要把训练好的模型存储起来,这样在进行决策时直接将模型读出,而不需要重新训练模型,这样就大大节约了时间 Python提供的pickle模块就很好地解决了这个问题,它可以 ...

  2. ElasticSearch的API介绍

    ElasticSearch的API介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.ES是基于Restful风格 1>ES是基于Restful风格 Elasticsea ...

  3. Hbase学习03

    第3章 Hbase数据存储模型与工作组件 Data格式设计的的总体原则是按照需求要求,依据Hbase性能的相关标准规范和文件,并遵循“统一规范.统一数据模型.统一规划集群.分步实施”的原则,注重实际应 ...

  4. ASP.NET新建解决方案和网站

    新建解决方案和网站 1.打开visual studio,选择新建项目,然后选择解决方案. 2.解决方案建好之后,右键点击解决方案选择新建网站.注意,路径.我在solution1文件夹下面又建了一个si ...

  5. 11、JDBC-Druid

    依赖 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  6. go结构体方法

    Golang中的方法是作用在特定类型的变量上,因此自定义类型,都可以有方法,而不仅仅是struct. 定义格式 func (var *Struct_Name) FuncName( var0, var1 ...

  7. Redis基本概念、基本使用与单机集群部署

    1. Redis基础 1.1 Redis概述 Redis是一个开源.先进的key-value存储,并用于构建高性能.可扩展的应用程序的完美解决方案. Redis从它的许多竞争继承了三个主要特点:    ...

  8. Linux 有用工具

    ``` 小问题,在此记录一下,有时在shell下执行命令重定向到文件时提示无权限-bash: temp_20181015.log: Permission denied,而且加sudo执行依提示无权限, ...

  9. cxf与spring的整合

    cxf与spring的整合: 一:服务端相关配置(配置好后启动tomocat就自动发布了接口,浏览器打开验证下) 1:导入cxf以及spring的相关jar包; 2:在web.xml中增加配置: 代码 ...

  10. 属性集合java.util.Properties

    属性集合java.util.Properties java.util.Properties集合 extends Hashtable<k, v> implements Map<k, v ...