在vue中created、mounted等方法使用小結(jié)
更新時間：2020年07月21日 14:59:00 作者：liudoris
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
created：html加載完成之前，執(zhí)行。執(zhí)行順序：父組件-子組件
mounted：html加載完成后執(zhí)行。執(zhí)行順序：子組件-父組件
methods：事件方法執(zhí)行
watch：watch是去監(jiān)聽一個值的變化，然后執(zhí)行相對應的函數(shù)。
computed：computed是計算屬性，也就是依賴其它的屬性計算所得出最后的值
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){}
}
補充知識：vue中在mounted中window.onresize不生效
在vue開發(fā)中，因為引用的父組件和子組件都使用了window.onresize以至于一個window.onresize失效。
解決方案==>可以采用下面的方式
window.onresize = () => this.screenWidth = window.innerWidth
// 改為以下寫法
window.addEventListener('resize', () => this.screenWidth = window.innerWidth, false)
以上這篇在vue中created、mounted等方法使用小結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue實現(xiàn)的下拉框功能,涉及vue.js數(shù)據(jù)讀取、遍歷、事件響應等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
最近得到一個新需求，需要在Vue項目的移動端頁面上加上左右滑動效果，經(jīng)過一番折騰，最終決定四月vue-touch。下面小編把實現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧2018-11-11
這篇文章主要介紹了vue?雙向綁定問題$emit無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中的計算屬性傳參，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vuejs第八篇之Vuejs組件的定義實例解析的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
`package.json`是Node.js和npm項目的核心配置文件,定義了項目的元數(shù)據(jù)和依賴項,在Vue項目中,它管理依賴、提供腳本命令、存儲項目信息,并通過語義化版本控制確保項目穩(wěn)定2025-01-01
詳解vue2.0 transition 多個元素嵌套使用過渡
這篇文章主要介紹了詳解vue2.0 transition 多個元素嵌套使用過渡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
vue-cli中devServer.proxy相關(guān)配置項的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關(guān)配置項的使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue關(guān)于自定義事件的$event傳參問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
element-ui 插槽自定義樣式居中效果實現(xiàn)思路
這篇文章主要介紹了element-ui 插槽自定義樣式居中效果,簡單來講實現(xiàn)思路是通過template標簽可理解為一個內(nèi)嵌組件,寬高重新定義,可在自定義內(nèi)容外層套一層盒子,讓盒子占滿所有空間,再使用flex讓內(nèi)部元素居中,需要的朋友可以參考下2024-07-07