vue页面加载后自动加载自定义函数
光头强儿 人气:0页面加载完成后自动加载自定义函数
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());
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容