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


Posted in Javascript onJuly 21, 2020

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)

以上这篇在vue中created、mounted等方法使用小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 #Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 #Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 #Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 #Javascript
vue 清空input标签 中file的值操作
Jul 21 #Javascript
Vue-resource安装过程及使用方法解析
Jul 21 #Javascript
vue中destroyed方法的使用说明
Jul 21 #Javascript
You might like
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
德生PL550的电路分析
2021/03/02 无线电
php addslashes和mysql_real_escape_string
2010/01/24 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
javascript Array.remove() 数组删除
2009/08/06 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
用js实现in_array的方法
2013/11/05 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
python实现电子词典
2020/04/23 Python
python字典get()方法用法分析
2015/04/17 Python
深入浅析python定时杀进程
2016/06/06 Python
python监控进程脚本
2018/04/12 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python散点图实例之随机漫步
2018/08/27 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
django连接oracle时setting 配置方法
2019/08/29 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python学习笔记之装饰器
2020/08/06 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
儿子婚宴答谢词
2014/01/09 职场文书
工作失职检讨书范文
2014/01/16 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
单位政审意见范文
2015/06/04 职场文书
电影雷锋观后感
2015/06/10 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL