溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了在vue中如何使用created、mounted，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
created：html加載完成之前，執行。執行順序：父組件-子組件
mounted：html加載完成后執行。執行順序：子組件-父組件
methods：事件方法執行
watch：watch是去監聽一個值的變化，然后執行相對應的函數。
computed：computed是計算屬性，也就是依賴其它的屬性計算所得出最后的值
export default {
name: "draw",
data(){ // 定義變量source
return {
source:new ol.source.Vector({wrapX: false}),
}
},
props:{ //接收父組件傳遞過來的參數
map:{
//type:String
},
},
mounted(){ //頁面初始化方法
if (map==map){
}
var vector = new ol.layer.Vector({
source: this.source
});
this.map.addLayer(vector);
},
watch: { //監聽值變化：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:{ //監聽方法 click事件等，執行drawFeatures方法
drawFeatures:function(drawType){}
}補充知識：vue中在mounted中window.onresize不生效
在vue開發中，因為引用的父組件和子組件都使用了window.onresize以至于一個window.onresize失效。
解決方案==>可以采用下面的方式
window.onresize = () => this.screenWidth = window.innerWidth
// 改為以下寫法
window.addEventListener('resize', () => this.screenWidth = window.innerWidth, false)以上就是關于在vue中如何使用created、mounted的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
