在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é)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue實(shí)現(xiàn)的下拉框功能,涉及vue.js數(shù)據(jù)讀取、遍歷、事件響應(yīng)等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
Vue實(shí)現(xiàn)移動(dòng)端左右滑動(dòng)效果的方法
最近得到一個(gè)新需求，需要在Vue項(xiàng)目的移動(dòng)端頁面上加上左右滑動(dòng)效果，經(jīng)過一番折騰，最終決定四月vue-touch。下面小編把實(shí)現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧2018-11-11
這篇文章主要介紹了vue?雙向綁定問題$emit無效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中的計(jì)算屬性傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vuejs第八篇之Vuejs組件的定義實(shí)例解析的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
`package.json`是Node.js和npm項(xiàng)目的核心配置文件,定義了項(xiàng)目的元數(shù)據(jù)和依賴項(xiàng),在Vue項(xiàng)目中,它管理依賴、提供腳本命令、存儲(chǔ)項(xiàng)目信息,并通過語義化版本控制確保項(xiàng)目穩(wěn)定2025-01-01
詳解vue2.0 transition 多個(gè)元素嵌套使用過渡
這篇文章主要介紹了詳解vue2.0 transition 多個(gè)元素嵌套使用過渡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關(guān)配置項(xiàng)的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue關(guān)于自定義事件的$event傳參問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
element-ui 插槽自定義樣式居中效果實(shí)現(xiàn)思路
這篇文章主要介紹了element-ui 插槽自定義樣式居中效果,簡(jiǎn)單來講實(shí)現(xiàn)思路是通過template標(biāo)簽可理解為一個(gè)內(nèi)嵌組件,寬高重新定義,可在自定義內(nèi)容外層套一層盒子,讓盒子占滿所有空間,再使用flex讓內(nèi)部元素居中,需要的朋友可以參考下2024-07-07