在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 相关文章推荐
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 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
PHP的面试题集
2006/11/19 PHP
PHP cron中的批处理
2008/09/16 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
使用Tkinter制作信息提示框
2020/02/18 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
《两只鸟蛋》教学反思
2014/02/10 职场文书
汇源肾宝广告词
2014/03/20 职场文书
党员公开承诺书
2014/03/25 职场文书
舞蹈专业求职信
2014/06/13 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
四风之害观后感
2015/06/09 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript