vue中created、mounted、 computed,watch,method 等方法整理
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 等方法整理的更多相关文章
- vue中methods、computed、watch区别
vue中methods.computed.watch区别methods:事件调用的钩子 computed:{ // 计算属性是根据他依赖的值计算的,当依赖值发生变化,其跟着改变 // 计算属性是依赖缓 ...
- 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码
[实例简介] 涵盖了几种常用的 webBrowser执行javascript的方法,详见示例截图以及代码 [实例截图] [核心代码] execScript方式: 1 2 3 4 5 6 7 8 9 1 ...
- vue中计算属性computed方法内传参
vue中computed计算属性无法直接进行传参 如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现 例如: 在上篇博客vue安装使用最后的成绩表练习中的过滤功能的实现: &l ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- Vue源码之----为什么Vue中Array的pop,push等方法可以reactive,而Array[0]='a'这样的方法不会reactive?
这就要从reactive开始讲起了,粗略的说,js的操作能引起页面上显示的改变,是因为该操作引起了组件的重新渲染,渲染会生成新的虚拟节点,新节点和旧节点会对比,操作浏览器的node进行改变. vue实 ...
- 解决Vue中"This dependency was not found"的方法
今天在初始化项目中,出现了一个奇怪的情况:明明路径是对的,但是编译的时候,一直报"This dependency was not found"的错. 代码如下: import Vu ...
- vue 中数据没有同步渲染的解决方法
今天在做一个页面,遇到一个数据渲染不同步的问题,如下: 代码如下:原理:点击时,对应的banklist 的选项选项变为 true 选中状态 html: <div class="PayO ...
- vue中created、mounted等方法整理
- vue中watch和computed为什么能监听到数据的改变以及不同之处
先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } ...
随机推荐
- MPC学习笔记1:基于状态空间模型的预测控制(1)
MPC调节器 1.给定一个由状态空间法描述的离散系统: MPC控制器与其他线性二次调节器(LQR)的区别就在于其可以很好的将系统动态约束纳入考虑. 采样周期Ts控制了算法的效率,太大会错过很多系统运行 ...
- Virtualbox下克隆CentOS 网络配置
Virtualbox下克隆虚拟机非常容易,也使得我们在平常搭建测试环境方便了许多.不过克隆以后的虚机并不能够直接联网,这是由于网卡的MAC地址引起的.在"控制->复制"弹出的 ...
- eclipse配置maven仓库
在eclipse中搭建maven工程时,首先需要搭建好maven本地仓库,搭建过程比较简单 1.首先,在eclipse中,打开windows->Maven->User Settings; ...
- mybatis查询如何返回List<Map>类型数据
只要设定resultType而不设定resultMap就可以了: <selectid="selectByPage"parameterType="java.uti ...
- WordCount编码实现及单元测试(第二次作业)
项目码云地址:https://gitee.com/zhujunlin/wc.git 一.题目思路 ========== 阅读完题目要求之后我很懵,因为之前从未使用过博客园和码云工具,对编程的目标需求也 ...
- java二分法搜索
二分法就是要将数据每次都分成两份然后再去找到你想要的数据 在二分法查找时要求传入的数据必须已经有序,假设现在为升序,然后每次将所寻找的值与中间值(数组左边界+(右边界-左边界)/2)作比较,大了则去寻 ...
- oralce的function处理考勤时间节点以及计算工作时间
例如: 上班时间为 8:30 到17:30,加班则到21:00:午休时间为1小时,(12:00-13:00): 晚间休息时间为半小时 (17:30-18:00),计算一批考勤数据的上班时间. 思路: ...
- Python学习—基础篇之常用模块
常用模块 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要 ...
- docker for mac
MacOS上通过docker部署 docker环境准备 1.访问这里安装好docker,需要注册账号才能下载dmg安装包:https://hub.docker.com/editions/communi ...
- JMETER java.net.SocketException: Connection reset 报错解决方案
相关值解析MaxUserPort:最大动态端口数(Default = 5000, Max = 65534)TcpTimedWaitDelay:TCP等待延迟时间(30)TcpNumConnection ...