`
kfcman
  • 浏览: 399575 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

vue中created、mounted等方法整理

    博客分类:
  • vue
 
阅读更多

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中created和mounted的区别浅析

    在这些钩子中,created和mounted是两个非常重要的钩子,它们各自承载不同的意义和作用。 首先,我们需要了解的是,Vue的生命周期主要分为创建、挂载、更新和销毁四个阶段。在创建阶段,组件实例被创建,数据观察和...

    解决vue项目F5刷新mounted里的函数不执行问题

    在Vue.js开发过程中,我们经常会遇到这样一个问题:在F5刷新页面后,`mounted`钩子函数中的逻辑没有被执行,导致页面的一些功能无法正常运行。本文将深入解析这个问题的原因,并提供解决方案。 首先,理解Vue的生命...

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

    在Vue实例的生命周期中,有多个关键的生命周期钩子函数,如`created`、`mounted`等,它们分别在不同的阶段执行,帮助开发者在合适的时机进行数据处理、DOM操作或事件绑定。下面是对这些生命周期钩子的详细说明: 1....

    vue 路由子组件created和mounted不起作用的解决方法

    在Vue组件的生命周期中,`created`钩子是在实例创建后立即调用,此时组件的DOM还未生成,而`mounted`钩子在组件挂载完成后调用,此时组件已经渲染到DOM中。如果`created`和`mounted`在`keep-alive`下不触发,可能是...

    Vue实例中生命周期created和mounted的区别详解

    `created`和`mounted`这两个钩子函数是开发过程中经常用到的,理解它们的区别能够帮助我们编写出更加高效和响应式的Vue组件。在实际项目中,根据需求选择合适的钩子函数进行逻辑处理,可以提高代码的可维护性和性能...

    vue ready事件处理函数使用方法

    此外,Vue还提供了一些其他生命周期钩子,如`beforeCreate`、`created`、`beforeMount`、`updated`等,它们各自在组件的不同阶段被调用,帮助开发者在正确的时间执行相应的任务。理解并熟练运用这些生命周期钩子是...

    在Vue mounted方法中使用data变量详解

    在Vue.js框架中,`mounted`是一个非常重要的生命周期钩子,它表示组件已经被挂载到DOM上,并且其模板已经被渲染。在这个阶段,你可以访问到真实DOM元素,并执行需要在DOM加载后才能运行的初始化操作。`data`对象是...

    vue 页面回退mounted函数不执行的解决方案

    前言 最近做项目碰到一个很头大的问题–从a页面跳到b页面进行编辑,编辑完再返回a页面,却没走a页面的钩子函数mounted,数据没有更新 ...当在项目中引入keep-alive的时候,页面第一次进入,钩子函数的触发顺序created

    谈一谈vue请求数据放在created好还是mounted里好

    关于“Vue请求数据放在`created`好还是`mounted`里好”的问题,主要涉及到Vue组件生命周期的理解以及页面渲染优化。 首先,`created`钩子在模板渲染成HTML之前被调用,适合用来初始化组件的数据和进行一些非DOM相关...

    在vue中使用ace编辑器

    例如,在 `created` 或 `mounted` 钩子中加载初始代码,或者使用计算属性根据外部数据动态更新编辑器内容。 `vue-ace-master` 压缩包中的文件可能是 Vue 示例项目的源代码,包含如何在 Vue 项目中实际应用 Ace 编辑...

    vue2.0中文手册API

    - **生命周期钩子**:如`beforeCreate`, `created`, `beforeMount`, `mounted`等,用于在组件不同阶段执行代码。 2. **组件化** - **组件定义**:通过`Vue.component()`全局注册组件,或在实例中使用`components`...

    vue文件资源2.6.14等

    例如,`created`, `mounted`, `updated`等钩子,使得组件初始化、渲染和更新的控制更加灵活。在新版本中,这些钩子可能已经过调整,以更好地适应异步数据流和性能优化。 Vue Router是Vue.js官方推荐的路由管理库,...

Global site tag (gtag.js) - Google Analytics