Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue中created、mounted等方法整理

vue中created、mounted等方法整理

作者头像
用户2323866
修改于 2021-06-25 02:14:12
修改于 2021-06-25 02:14:12
59200
代码可运行
举报
文章被收录于专栏:技术派技术派
运行总次数:0
代码可运行

created:html加载完成之前,执行。执行顺序:父组件-子组件

mounted:html加载完成后执行。执行顺序:子组件-父组件

methods:事件方法执行

watch:watch是去监听一个值的变化,然后执行相对应的函数。

computed:computed是计算属性,也就是依赖其它的属性计算所得出最后的值

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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){}
}

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
openlayers中网格聚类的实现
聚类是根据一定的规则将数据进行分类统计,常见的聚类方式有:1、基于行政区划;2、基于空间距离;3、基于业务字段。本文实现了基于固定大小的网格的聚类。
牛老师讲GIS
2023/06/10
8430
openlayers中网格聚类的实现
一面高频vue面试题
eventBus事件总线适用于父子组件、非父子组件等之间的通信,使用步骤如下: (1)创建事件中心管理组件之间的通信
bb_xiaxia1998
2022/10/28
8400
shapefile.js实现shp数据的上传与展示
shapefile是常见的矢量数据格式,但是由于其文件组成结构很难在webgis上直接展示。本文通过express和compressing实现打包后shapefile文件的上传,并结合shapefile.js实现shapefile数据的转换展示。
牛老师讲GIS
2023/05/11
1.9K0
shapefile.js实现shp数据的上传与展示
openlayers4+中台风路径播放优化
本文在以前风圈生成文章的基础上,将openlayers4+中台风路径的播放展示做了优化,并进行了封装。
牛老师讲GIS
2020/02/27
1.6K0
openlayers4+中台风路径播放优化
如何准备好一场vue面试
SSR也就是服务端渲染,也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成,然后再把html直接返回给客户端
bb_xiaxia1998
2022/11/07
5820
Openlayers3中如何优雅的表示等值面
等值面,顾名思义,就是值相等的面,在水文或气象中会有很多这样的需求。本文不讲如何做等值面,本文将如何展示等值面。
牛老师讲GIS
2018/10/23
1.5K0
Openlayers3中如何优雅的表示等值面
前端面试(3)vue
https://juejin.im/entry/6844903479044112391
leader755
2022/03/08
3.4K0
前端面试(3)vue
vue设计模式总结-vue中主要用到了那些设计模式-面试篇
Vue 使用观察者模式来实现数据的响应式,当数据发生变化时,相关的视图会自动更新。
Jacky-易小天
2024/03/14
7250
vue设计模式总结-vue中主要用到了那些设计模式-面试篇
前端一面常见vue面试题合集_2023-03-01
这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不举例展开介绍。
用户10358241
2023/03/01
7720
34条我能告诉你的Vue之实操篇
这样一来 this.title 就直接拿到从父组件中传过来的 title 的值了。注意,你不应该在子组件内部直接改变 prop,这里就不多赘述,可以直接看官网介绍。
童欧巴
2020/11/02
1.7K0
Vue3 + TypeScript 开发实践总结
迟来的Vue3文章,其实早在今年3月份时就把Vue3过了一遍。 在去年年末又把 TypeScript 重新学了一遍,为了上Vue3 的车,更好的开车。 在上家公司4月份时,上级领导分配了一个内部的 党务系统开发 ,这个系统前端是由我一个人来开发,功能和需求也不怎么复杂的一个B 端 系统,直接上的 Vue3 + TypeScript + Element Plus 开发的,开发两周到最后的上线,期间也遇到很多小坑,很多无处可查,慢慢琢磨最后还是克服了。
程序员海军
2021/07/09
1.8K0
Vue3 + TypeScript 开发实践总结
2021vue面试题+答案
v-if 是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
zz1998
2021/07/05
8430
Openlayer画线
可以把图层保存在数组中,移除时采用removeLayer,只能单个移除图层,暂时没看到移除多个图层的方法
tianyawhl
2021/03/02
9420
Ol4网格生成以及优化
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
牛老师讲GIS
2019/11/14
5130
2022前端经典vue面试题(持续更新中)
一个SPA应用的路由需要解决的问题是 页面跳转内容改变同时不刷新 ,同时路由还需要以插件形式存在,所以:
bb_xiaxia1998
2022/09/16
1K0
openlayer 点击标记点
我用的版本是"openlayers" : "^4.6.5" ,首先在Feature设置ID,便于获取这个标记点的信息 iconFeature.set("Id",item.id)
tianyawhl
2021/08/24
1.3K0
Vue3 的 7 种和 Vue2 的 12 种组件通信,值得收藏
如果父组件是混合写法,子组件纯 Vue3 写法的话,是接收不到父组件里 data 的属性,只能接收到父组件里 setup 函数里传的属性。
Swift社区
2024/10/10
3280
Vue3 的 7 种和 Vue2 的 12 种组件通信,值得收藏
OpenLayers3基础教程——OL3 介绍interaction
本节主要讲述OL3的交互操作interaction,重点介绍draw,select以及modify。
牛老师讲GIS
2018/10/23
9710
OpenLayers3基础教程——OL3 介绍interaction
前端常考vue面试题(必备)_2023-03-15
computed 内部实现了一个惰性的 watcher,也就是 computed watcher,computed watcher 不会立刻求值,同时持有一个 dep 实例。
yyds2026
2023/03/15
1.1K0
Openlayers3中实现地图的切割
概述: 本文讲述如何在Openlayers3中结合canvas实现对地图的切割。 效果: 全图 切割北京区域 切割河北区域 实现: <html xmlns="http://www.w3.org/199
牛老师讲GIS
2018/10/23
1.9K0
Openlayers3中实现地图的切割
相关推荐
openlayers中网格聚类的实现
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验