vue mounted組件的使用
1.鉤子函數(shù)
鉤子函數(shù)是Windows消息處理機(jī)制的一部分，通過設(shè)置“鉤子”，應(yīng)用程序可以在系統(tǒng)級(jí)對(duì)所有消息、事件進(jìn)行過濾，訪問在正常情況下無法訪問的消息。鉤子的本質(zhì)是一段用以處理系統(tǒng)消息的程序，通過系統(tǒng)調(diào)用，把它掛入系統(tǒng)。（百度百科）
2.相對(duì)于前端來講
對(duì)于前端來說，鉤子函數(shù)就是指再所有函數(shù)執(zhí)行前，我先執(zhí)行了的函數(shù)，即 鉤住 我感興趣的函數(shù)，只要它執(zhí)行，我就先執(zhí)行。
3.vue中的mounted
在這發(fā)起后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情
類型：Function
詳細(xì)：
el被新創(chuàng)建的 vm.el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng)mounted被調(diào)用時(shí)vm.el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng)mounted被調(diào)用時(shí)vm.el 也在文檔內(nèi)
該鉤子在服務(wù)器端渲染期間不被調(diào)用。
4.代碼實(shí)例
new Vue({
el: '#app',
data: {
totalMoney: 0,
productList: []
},
filters: {
},
mounted: function() {
//這個(gè)是鉤子函數(shù)
//如果cartView函數(shù)要執(zhí)行，必須先執(zhí)行鉤子函數(shù)
//這個(gè)鉤子函數(shù)完成了對(duì)cratView函數(shù)的調(diào)用
//應(yīng)該注意的是，使用mounted 并不能保證鉤子函數(shù)中的 this.$el 在 document 中。為此還應(yīng)該引入 Vue.nextTick/vm.$nextTick
this.$nextTick(function () {
this.cartView()
})
})
},
methods: {
//這個(gè)是要執(zhí)行的函數(shù)
cartView: function() {
var _this = this;
this.$http.get("data/cartData.json", {"id": 123}).then(function(res) {
_this.productList = res.body.result.list;
_this.totalMoney = res.body.result.totalMoney;
});
}
}
}
});
如果大家想對(duì)VUE.JS有更加深入系統(tǒng)的學(xué)習(xí)，可以參閱 Vue.js實(shí)戰(zhàn) PDF高質(zhì)量掃描版 這本經(jīng)典書籍
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了VueJS頁面渲染之后如何調(diào)用函數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總
這篇文章主要介紹了electron-vue開發(fā)環(huán)境內(nèi)存泄漏問題匯總，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
如何在Vue 3中擴(kuò)展Vue Router鏈接詳解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何在Vue 3中擴(kuò)展Vue Router鏈接的相關(guān)資料,需要的朋友可以參考下2021-06-06
vue引入jquery時(shí)報(bào)錯(cuò) $ is not defined的問題及解決
這篇文章主要介紹了vue引入jquery時(shí)報(bào)錯(cuò) $ is not defined的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-09-09
這篇文章主要介紹了Vue路由傳參的兩種方式query和params,介紹了query和params區(qū)別與總結(jié)，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
在?Vue.js?中,你可以通過多種方式將樣式私有化,以確保樣式只作用于特定的組件,避免全局污染,本文整理了一些常用的方法,希望對(duì)大家有所幫助2024-11-11
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-10-10
淺談Vue3.0新版API之composition-api入坑指南
這篇文章主要介紹了Vue3.0新版API之composition-api入坑指南，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問題
這篇文章主要介紹了解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于項(xiàng)目部署后前端vue代理失效問題的解決辦法,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02