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

 更新时间:2022年07月02日 08:42:28   作者:光头强儿  
这篇文章主要介绍了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());

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 关于VueRouter导入的全过程

    关于VueRouter导入的全过程

    这篇文章主要介绍了关于VueRouter导入的全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明方法详解

    vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明方法详解

    我在学习vue3+vite+ts的时候,在配置别名这一步的时候遇到了一个问题,这篇文章主要给大家介绍了关于vite配置别名并处理报错:找不到模块“xxx”或其相应的类型声明的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue如何在main.js中配置全局的通用公共组件

    vue如何在main.js中配置全局的通用公共组件

    这篇文章主要介绍了vue如何在main.js中配置全局的通用公共组件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 简易vuex4核心原理及实现源码分析

    简易vuex4核心原理及实现源码分析

    这篇文章主要为大家介绍了简易vuex4核心原理及实现源码分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • Vue 2源码解析ParseHTML函数HTML模板

    Vue 2源码解析ParseHTML函数HTML模板

    这篇文章主要为大家介绍了Vue 2源码解析ParseHTML函数HTML模板详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue中keep-alive组件的原理与缓存详解

    Vue中keep-alive组件的原理与缓存详解

    Vue 的 keep-alive 是一个内置组件,用于缓存不活动的组件实例,避免重复渲染,从而优化应用性能,下面就跟随小编一起来看看其核心实现原理和缓存内容吧
    2025-03-03
  • 基于elementUI竖向表格、和并列的案例

    基于elementUI竖向表格、和并列的案例

    这篇文章主要介绍了基于elementUI竖向表格、和并列的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue.js组件通信的几种姿势

    Vue.js组件通信的几种姿势

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。下面通过本文给大家分享Vue.js组件通信的几种姿势,感兴趣的朋友一起看看吧
    2017-10-10
  • vue中template的三种写法示例

    vue中template的三种写法示例

    这篇文章主要介绍了vue中template的三种写法示例,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-10-10
  • vue中本地静态图片的路径应该怎么写

    vue中本地静态图片的路径应该怎么写

    这篇文章主要介绍了vue中本地静态图片的路径应该怎么写,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论