在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调用webService远程访问出错的解决方法
May 21 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 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学习笔记 数组的常用函数
2011/06/13 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
python的mysqldb安装步骤详解
2017/08/14 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
生产车间班组长岗位职责
2014/01/06 职场文书
新学期标语
2014/06/30 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
事业单位年度考核评语
2014/12/31 职场文书
民事答辩状格式范文
2015/05/21 职场文书