Vue頁(yè)面加載完成后如何自動(dòng)加載自定義函數(shù)
頁(yè)面加載完成后自動(dòng)加載自定義函數(shù)
created
在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
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(){
? ? ? ? ? ? //自動(dòng)加載indexs方法
? ? ? ? ? ? this.indexs();
? ? ? ? }mounted
在模板渲染成html后調(diào)用，通常是初始化頁(yè)面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。
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(){
? ? ? ? ? ? //自動(dòng)加載indexs方法
? ? ? ? ? ? this.indexs();
? ? ? ? }vue之自執(zhí)行函數(shù)
總是糾結(jié)在寫不寫隨筆之間，自我感覺很菜，但是對(duì)源碼愛得深沉，就寫給自己看吧。
我在網(wǎng)上看了很多人寫的源碼，按照依賴的方式一個(gè)一個(gè)找包，再找函數(shù)，我覺得太麻煩，復(fù)雜。所以直接看vue.js。
打開vue.js，是個(gè)自執(zhí)行函數(shù)，也就是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'
})自執(zhí)行函數(shù)想必不用我多說了，讓我們來分析下這種插件與框架的寫法。
它的參數(shù)為global和factory，在js環(huán)境下也就是window和Vue的構(gòu)造函數(shù)。
this在這里值window，如果經(jīng)?？丛创a，就會(huì)發(fā)現(xiàn)很多插件會(huì)判斷下
typeof window !== undefined ? window : this;
這種寫法更偏向于在js的window全局環(huán)境中使用。
接著看對(duì)外輸出factory，首先判斷 module和exports存在的情況
typeof exports === 'object' && typeof module !== 'undefined'
也就是優(yōu)先使用AMD(module.exports = factory)，接著判斷CMD是否存在
typeof define === 'function' && define.amd?
若AMD不存在而CMD存在，則使用CMD(define(factory)),若AMD，CMD都不存在，就把Vue的構(gòu)造函數(shù)掛載再全局對(duì)象上(global.Vue = factory());
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了關(guān)于VueRouter導(dǎo)入的全過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vite配置別名并處理報(bào)錯(cuò):找不到模塊“xxx”或其相應(yīng)的類型聲明方法詳解
我在學(xué)習(xí)vue3+vite+ts的時(shí)候,在配置別名這一步的時(shí)候遇到了一個(gè)問題,這篇文章主要給大家介紹了關(guān)于vite配置別名并處理報(bào)錯(cuò):找不到模塊“xxx”或其相應(yīng)的類型聲明的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue如何在main.js中配置全局的通用公共組件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
簡(jiǎn)易vuex4核心原理及實(shí)現(xiàn)源碼分析
這篇文章主要為大家介紹了簡(jiǎn)易vuex4核心原理及實(shí)現(xiàn)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Vue?2源碼解析ParseHTML函數(shù)HTML模板
這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數(shù)HTML模板詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue 的 keep-alive 是一個(gè)內(nèi)置組件,用于緩存不活動(dòng)的組件實(shí)例,避免重復(fù)渲染,從而優(yōu)化應(yīng)用性能,下面就跟隨小編一起來看看其核心實(shí)現(xiàn)原理和緩存內(nèi)容吧2025-03-03
這篇文章主要介紹了基于elementUI豎向表格、和并列的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。下面通過本文給大家分享Vue.js組件通信的幾種姿勢(shì)，感興趣的朋友一起看看吧2017-10-10
這篇文章主要介紹了vue中template的三種寫法示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了vue中本地靜態(tài)圖片的路徑應(yīng)該怎么寫,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10