当前位置:首页 > 网站建设 > 源码技巧 > 正文内容

在vue中created、mounted等方法使用小结

热淘网2个月前 (07-27)源码技巧76

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)



扫描二维码推送至手机访问。

版权声明:本文由热淘网发布,如需转载请注明出处。

本文链接:https://www.retao5.com/yuanma/1576.html

标签: vue
分享给朋友:
返回列表

上一篇:js定时器setTimeout和setInterval详解

没有最新的文章了...

相关文章

在首页调用指定文章下的三级分类栏目名称

在首页调用指定文章下的三级分类栏目名称

[code]$value['name']: $value[name] [/code]...

首页js轮播,图片可后台控制。

首页js轮播,图片可后台控制。

统默认就4种flash轮播,样式比较单一。经常我们用一些js轮播替换,这样有利于seo。一般我们都采用ftp上传图片覆盖,操作比较麻烦。小想自己写了个js调用系统flash_data.xml,读取后台...

模块创建使用技巧

模块创建使用技巧

在创建模块处。。如果你选择了只获取数据[b]使用获得的模板内部调用代码[/b]注:模板代码此处不赘述。将上面获取的代码复制到 SupeSite 的模板文件中(默认模板的目录为 templates/de...

过滤ss模块调用乱七八糟的字符

过滤ss模块调用乱七八糟的字符

[code]function htmldecode($str){if(empty($str)) return;if($str=="") return $str;$str=dhtmlspecialcha...

论坛URL静态化教程

论坛URL静态化教程

[i=s] 本帖最后由 木兴 于 2010-8-18 20:39 编辑 [/i] 如何设置论坛[b][color=#ff0000]静态化[/color][/b]:1登陆论坛后台,全局,优化设置。如下...

各应用不能同步的排查方法

各应用不能同步的排查方法

在 UCenter 系统下的各 Comsenz 产品均可以实现同步登录、同步退出,如何设置同步登录可参考教程:[url=http://faq.comsenz.com/viewnews-24][colo...

评论列表

250075083
1个月前 (08-18)

以后多来这里学习,请各位多多指教

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。