在vue中created、mounted等方法使用小结
更新时间：2020年07月21日 14:59:00 作者：liudoris
这篇文章主要介绍了在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等方法使用小结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue使用gitshot生成gif问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了Vue.js数字输入框组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了vue.config.js打包优化配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
用户登录后修改密码,密码需要一定的验证规则,这篇文章主要介绍了vue+elementUI用户修改密码的前端验证,需要的朋友可以参考下2024-03-03
element ui的el-input-number修改数值失效的问题及解决
这篇文章主要介绍了element ui的el-input-number修改数值失效的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本篇文章主要介绍了vue-router 组件复用问题详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
Vue是构建Web界面的JavaScript库，原称为Vue.js，它可以通过简洁的API来提供高效的数据绑定和灵活的组件系统，本文详细介绍了Vue的使用安装和相关知识，有兴趣的同学可以参考借鉴2023-03-03
这篇文章主要介绍了vue跳转同一路由报错的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue中使用ts配置的具体步骤，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
前端页面自适应有很多方法可以实现,本文小编将为大家详细介绍四种常用的方法,并提供相应的代码示例,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
最新评论