在vue中created、mounted等方法使用小結(jié)
更新時(shí)間：2020年07月21日 14:59:00 作者：liudoris
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
created：html加載完成之前，執(zhí)行。執(zhí)行順序：父組件-子組件
mounted：html加載完成后執(zhí)行。執(zhí)行順序：子組件-父組件
methods：事件方法執(zhí)行
watch：watch是去監(jiān)聽一個(gè)值的變化，然后執(zhí)行相對(duì)應(yīng)的函數(shù)。
computed：computed是計(jì)算屬性，也就是依賴其它的屬性計(jì)算所得出最后的值
export default {
name: "draw",
data(){ // 定義變量source
return {
source:new ol.source.Vector({wrapX: false}),
}
},
props:{ //接收父組件傳遞過來的參數(shù)
map:{
//type:String
},
},
mounted(){ //頁面初始化方法
if (map==map){
}
var vector = new ol.layer.Vector({
source: this.source
});
this.map.addLayer(vector);
},
watch: { //監(jiān)聽值變化：map值
map:function () {
console.log('3333'+this.map);
//return this.map
console.log('444444'+this.map);
var vector = new ol.layer.Vector({
source: this.source
});
this.map.addLayer(vector);
}
},
methods:{ //監(jiān)聽方法 click事件等，執(zhí)行drawFeatures方法
drawFeatures:function(drawType){}
}
補(bǔ)充知識(shí)：vue中在mounted中window.onresize不生效
在vue開發(fā)中，因?yàn)橐玫母附M件和子組件都使用了window.onresize以至于一個(gè)window.onresize失效。
解決方案==>可以采用下面的方式
window.onresize = () => this.screenWidth = window.innerWidth
// 改為以下寫法
window.addEventListener('resize', () => this.screenWidth = window.innerWidth, false)
以上這篇在vue中created、mounted等方法使用小結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue使用gitshot生成gif問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了Vue.js數(shù)字輸入框組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了vue.config.js打包優(yōu)化配置，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue+elementUI用戶修改密碼的前端驗(yàn)證規(guī)則
用戶登錄后修改密碼,密碼需要一定的驗(yàn)證規(guī)則,這篇文章主要介紹了vue+elementUI用戶修改密碼的前端驗(yàn)證,需要的朋友可以參考下2024-03-03
element ui的el-input-number修改數(shù)值失效的問題及解決
這篇文章主要介紹了element ui的el-input-number修改數(shù)值失效的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
本篇文章主要介紹了vue-router 組件復(fù)用問題詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
Vue是構(gòu)建Web界面的JavaScript庫，原稱為Vue.js，它可以通過簡潔的API來提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，本文詳細(xì)介紹了Vue的使用安裝和相關(guān)知識(shí)，有興趣的同學(xué)可以參考借鑒2023-03-03
vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決
這篇文章主要介紹了vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue中使用ts配置的具體步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)頁面自適應(yīng)的常用4種方法
前端頁面自適應(yīng)有很多方法可以實(shí)現(xiàn),本文小編將為大家詳細(xì)介紹四種常用的方法,并提供相應(yīng)的代碼示例,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10