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、 computed,watch,method 等方法整理的更多相关文章

  1. vue中methods、computed、watch区别

    vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...

  2. 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码

    [实例简介] 涵盖了几种常用的 webBrowser执行javascript的方法,详见示例截图以及代码 [实例截图] [核心代码] execScript方式: 1 2 3 4 5 6 7 8 9 1 ...

  3. vue中计算属性computed方法内传参

    vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...

  4. 浅谈Vue中计算属性computed的实现原理

    虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...

  5. Vue源码之----为什么Vue中Array的pop,push等方法可以reactive,而Array[0]='a'这样的方法不会reactive?

    这就要从reactive开始讲起了,粗略的说,js的操作能引起页面上显示的改变,是因为该操作引起了组件的重新渲染,渲染会生成新的虚拟节点,新节点和旧节点会对比,操作浏览器的node进行改变. vue实 ...

  6. 解决Vue中"This dependency was not found"的方法

    今天在初始化项目中,出现了一个奇怪的情况:明明路径是对的,但是编译的时候,一直报"This dependency was not found"的错. 代码如下: import Vu ...

  7. vue 中数据没有同步渲染的解决方法

    今天在做一个页面,遇到一个数据渲染不同步的问题,如下: 代码如下:原理:点击时,对应的banklist 的选项选项变为 true 选中状态 html: <div class="PayO ...

  8. vue中created、mounted等方法整理

  9. vue中watch和computed为什么能监听到数据的改变以及不同之处

    先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } ...

随机推荐

  1. Entity Framework 支持 DataTable

    转载:http://www.cnblogs.com/wlflovenet/archive/2011/12/30/EF11.html https://www.cnblogs.com/hanjun0612 ...

  2. c# System.Console

    System.Console类公开了和操作控制台相关的有用的静态字段和静态方法.下面是System.Console中一些较为重要的方法. public static void Beep()该方法播放蜂 ...

  3. nginx入门之编译安装

    nginx是什么 nginx是一个开源的,支持高性能,高并发的www服务和代理服务软件.它是一个俄罗斯人lgor sysoev开发的,作者将源代码开源出来供全球使用. nginx比它大哥apache性 ...

  4. vue+el-menu设置了router之后如何跳转到外部链接

    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="c ...

  5. GitLab管理之 - Gitlab 用户管理

    1. 移除用户 (1) 使用管理员登陆Gitlab服务器 (2) 点击管理区域 (3) 点击Users. (4)点击[Block User] 2. 添加用户(1)用root 管理员登陆.(2)点击[管 ...

  6. day50 盒子显隐2D形变

    复习 1.浮动布局 解决block盒子同行显示 => 不完全脱离文档流 => 不再撑开父级高度 脱离文档流: 不在页面中占位(显示层次高于文档流) 不完全: 可以通过清浮动操作, 让子级重 ...

  7. Windows7下安装、部署Weblogic和发布war项目

    安装 1 从官方下载安装包 链接 2 下载之后,放到 Java8\jdk1.8.0\bin目录下 3 打开cmd,输入 java -jar . 4 5 6 下面是我自定义的目录, 7 8 9 10 1 ...

  8. coderwarrior 查看程序大小 Code Size

    https://mcuoneclipse.com/2012/09/24/code-size-information-with-gcc-for-armkinetis/

  9. 安装IDEA的历程

    安装IDEA的历程 写这篇博客的主要目的就是记录自己安装IDEA的"复杂"过程,顺便给一些需要帮助的人提供一些帮助,以及让他们可以少走一些弯路.之所以说"复杂" ...

  10. Saving custom fields in production order

    In additional data screen 1.PPCO0012->EXIT_SAPLCOKO1_001->ZXCO1U11 ​ ​ ci_aufk-zxxx = i_caufvd ...