Vue页面加载完成后如何自动加载自定义函数

目录
  • 页面加载完成后自动加载自定义函数
    • created
    • mounted
  • vue之自执行函数

页面加载完成后自动加载自定义函数

created

在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

methods: {
            indexs:function(){
                this.$http.post('{:url("Index/fun")}')
                    .then(function(res){
                        this.items=res.data;
                        console.log(res.data);
                    })
                    .catch(function(error){
                        console.log(error);
                    });
            }
        },
        created(){
            //自动加载indexs方法
            this.indexs();
        }

mounted

在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

methods: {
            indexs:function(){
                this.$http.post('{:url("Index/fun")}')
                    .then(function(res){
                        this.items=res.data;
                        console.log(res.data);
                    })
                    .catch(function(error){
                        console.log(error);
                    });
            }
        },
        mounted(){
            //自动加载indexs方法
            this.indexs();
        }

vue之自执行函数

总是纠结在写不写随笔之间，自我感觉很菜，但是对源码爱得深沉，就写给自己看吧。

我在网上看了很多人写的源码，按照依赖的方式一个一个找包，再找函数，我觉得太麻烦，复杂。所以直接看vue.js。

打开vue.js，是个自执行函数，也就是IIFE。

(function(global,factory){
    typeof exports === 'object' && typeof module !== 'undefined' 
        ? module.exports = factory
        : typeof define === 'function' && define.amd 
            ? define(factory)
            : (global.Vue = factory())
})(this,function(){
    'use strict'
})

自执行函数想必不用我多说了，让我们来分析下这种插件与框架的写法。

它的参数为global和factory，在js环境下也就是window和Vue的构造函数。

this在这里值window，如果经常看源码，就会发现很多插件会判断下

typeof window !== undefined ? window : this;

这种写法更偏向于在js的window全局环境中使用。

接着看对外输出factory，首先判断 module和exports存在的情况

typeof exports === 'object' && typeof module !== 'undefined'

也就是优先使用AMD(module.exports = factory)，接着判断CMD是否存在

typeof define === 'function' && define.amd 

若AMD不存在而CMD存在，则使用CMD(define(factory)),若AMD，CMD都不存在，就把Vue的构造函数挂载再全局对象上(global.Vue = factory());

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VUE DOM加载后执行自定义事件的方法

    最近想用vue做一个小东西,谁知道一开始就遇到了一个棘手的问题: 首先我想在页面加载前通过ajax请求页面展示所需要的信息,于是我在created钩子函数里面请求了我想要的数据 created:function(){ var url="/indexitem"; var _self=this; $.get(url,function(data){ _self.items=data; }); $.get('/banner',function(data){ _self.banners=data

  • vuejs实现ready函数加载完之后执行某个函数的方法

    vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 我期望vue中tds全都渲染在界面上之后,再调用一个函数(其实这个函数主要作用是给表格中的选择框加监听,如果tds没有渲染,那监听也加不上去). <div class="row" id="app"> <div

  • vue自定义加载指令最新详解

    目录 前言 创建加载组件 创建指令 指令文件 创建构造器 书写指令 开启函数 关闭函数 前言 用过element-ui的都应该知道,里面有一个loading组件,有两种调用方法:指令和服务.但是只有一种加载效果,为了丰富加载效果和方便使用,于是写了一个自定义loading指令. 创建加载组件 首先,需要创建loading组件,展示需要的加载效果,因人而异,不再赘述. 创建指令 指令文件 首先,创建一个js文件用于书写自定义指令,在这个文件中导入Vue和loading组件: import Vue

  • Vue页面加载完成后如何自动加载自定义函数

    目录 页面加载完成后自动加载自定义函数 created mounted vue之自执行函数 页面加载完成后自动加载自定义函数 created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. methods: {             indexs:function(){                 this.$http.post('{:url("Index/fun")}')                     .then(function(res){

  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 $(window).scroll(functi

  • PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间

    PHP前言: •动态地创建属性和方法 •对象的复制 •对象的比较 •加载指定的文件 •自动加载类文件 •命名空间 示例 1.类的相关知识点 3(动态地创建属性和方法) class/class3.php <?php /** * 类的相关知识点 3(动态地创建属性和方法) */ // 用于演示如何动态地创建属性(这就是 php 中所谓的重载) class Class1 { // __set 魔术方法,当设置的属性不存在或者不可访问(private)时就会调用此函数 public function _

  • 页面加载完毕后滚动条自动滚动一定位置

    昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置. 一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效,结果失望了~ 今天抽空一查,才发现: 使用document.documentElement.scrollLeft 设置值,必须在人为事件触发下才生效: 想要页面加载完毕时自动滚动一定距离,则使用jquery的animate,如下面例子: $("html,body").animate({"scrollLeft

  • Spring加载属性文件方式(自动加载优先级问题)

    Spring加载属性文件方式(自动加载优先级问题)

    目录 Spring加载属性文件 方式1.用xml文件配置 方式2.用注解 对Spring加载顺序的理解 web.xml初始化 spring加载流程 Spring加载属性文件 方式1.用xml文件配置 正常情况下,spring整合mybatis的配置文件的dataSource部分如下  <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"

  • PHP数组 为文章加关键字连接 文章内容自动加链接

    复制代码 代码如下: <?php $keys =array( array('网页特效','/js_a/js.html'), array('seo','/seo/seo.html'), array('php','/phper/php.html'), array('jsp','/jsp/jsp.html'), array('asp','/asp/asp.html'), array('ps','/fw/photo.html'), array('photoshop','/fw/photo.html'),

  • vue中如何通过iframe方式加载本地的vue页面

    目录 通过iframe方式加载本地的vue页面 iframe方式加载本地的vue页面的第一种方法 iframe方式加载本地的vue页面的第二种方法 iframe方式加载本地的vue页面的第三种方法 关于iframe在vue中应用问题 iframe的宽高无法根据内容撑开 通过iframe方式加载本地的vue页面 也是在实际的项目中碰到一个奇葩的需求,用vue,居然还要用到iframe,真是脑壳大,试了好多次最后才找到了正确的方法. 总共有三种方法吧 iframe方式加载本地的vue页面的第一种方法

  • javaScript和jQuery自动加载简单代码实现方法

    在此之前我们给大家整理过用javaScript和jQuery自动加载的几种方法,大家可以参考一下:javaScript 页面自动加载事件详解 一.JavaScript自动加载 ①在文本中用onload: 当页面中所有内容(包括图片)加载完后再执行onload,如下: <body onload="alert(1)"></body> <!-- 当有一个onload --> <body onload="alert(2);alert(3);a

  • php类自动加载失败的处理方案及实例代码

    1.打开相应的PHP代码文件. 2.添加"$class = str_replace("\\","/",$class);"代码即可. 文件在本地win系统下测试无异常,代码如下: function stu_autoload($class){ if(file_exists($class.".php")){ require ( $class.".php"); }else{ die("unable to

  • jQuery实现滚动到底部时自动加载更多的方法示例

    本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法.分享给大家供大家参考,具体如下: 这里利用AJAX,实现滚动到底加载数据功能: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/

随机推荐