在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 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
浅谈javascript回调函数
Dec 07 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
tsconfig.json配置详解
May 17 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 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
MySQL连接数超过限制的解决方法
2011/07/17 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
Javascript 面向对象特性
2009/12/28 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
javascript定义函数的方法
2010/12/06 Javascript
js计算精度问题小结
2013/04/22 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
python web框架学习笔记
2016/05/03 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
python中if及if-else如何使用
2020/06/02 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
法人代表委托书
2014/04/04 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
个人授权委托书格式
2014/08/30 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python