vue mounted組件的使用

更新時(shí)間：2018年06月18日 10:34:56 作者：EffIdong

這篇文章主要介紹了vue mounted組件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1.鉤子函數(shù)

鉤子函數(shù)是Windows消息處理機(jī)制的一部分，通過(guò)設(shè)置“鉤子”，應(yīng)用程序可以在系統(tǒng)級(jí)對(duì)所有消息、事件進(jìn)行過(guò)濾，訪問(wèn)在正常情況下無(wú)法訪問(wèn)的消息。鉤子的本質(zhì)是一段用以處理系統(tǒng)消息的程序，通過(guò)系統(tǒng)調(diào)用，把它掛入系統(tǒng)。（百度百科）

2.相對(duì)于前端來(lái)講

對(duì)于前端來(lái)說(shuō)，鉤子函數(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)典書(shū)籍

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
mounted

相關(guān)文章

詳解Vue3子組件向父組件傳遞消息
這篇文章主要介紹了Vue3子組件向父組件傳遞消息,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
vue中對(duì)時(shí)間戳的處理方式
這篇文章主要介紹了vue中對(duì)時(shí)間戳的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue中mixins混入的介紹與使用詳解
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧
2022-12-12
Vue3在jsx下父子組件實(shí)現(xiàn)使用插槽方式
這篇文章主要介紹了Vue3在jsx下父子組件實(shí)現(xiàn)使用插槽方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue仿手機(jī)qq的實(shí)例代碼(demo)
Vue.js（讀音 /vjuː/, 類似于 view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章給大家介紹Vue仿手機(jī)qq的實(shí)例代碼，需要的的朋友參考下吧
2017-09-09
解決vue props 拿不到值的問(wèn)題
今天小編就為大家分享一篇解決vue props 拿不到值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue-admin-template?動(dòng)態(tài)路由的實(shí)現(xiàn)示例
本文主要介紹了ue-admin-template動(dòng)態(tài)路由的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
Element Backtop回到頂部的具體使用
這篇文章主要介紹了Element Backtop回到頂部的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
vue.js實(shí)現(xiàn)開(kāi)關(guān)(switch)組件實(shí)例代碼
這篇文章介紹了vue.js實(shí)現(xiàn)開(kāi)關(guān)(switch)組件的實(shí)例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-06-06
vue 彈框產(chǎn)生的滾動(dòng)穿透問(wèn)題的解決
這篇文章主要介紹了vue 彈框產(chǎn)生的滾動(dòng)穿透問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09