VUE DOM加载后执行自定义事件的方法


Posted in Javascript onSeptember 07, 2018

最近想用vue做一个小东西,谁知道一开始就遇到了一个棘手的问题:

首先我想在页面加载前通过ajax请求页面展示所需要的信息,于是我在created钩子函数里面请求了我想要的数据

created:function(){
   var url="/indexitem";
   var _self=this;
   $.get(url,function(data){
   _self.items=data;
   });
   $.get('/banner',function(data){
   _self.banners=data;
   });
  }

这一步很顺利,接下来就是要将数据绑定到对应的元素中,我在这里需要将请求得到的图片地址绑定到轮播图对应的元素中,

我这里采用的是mui框架中提供的图片轮播(移动端,支持手势滑动),问题恰恰就这里:

<div id="slider" class="mui-slider" @click="greet()">
  <div class="mui-slider-group mui-slider-loop">
   <div class="mui-slider-item mui-slider-item-duplicate"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" :style="{backgroundImage: 'url(' + banners[banners.length-1].src+ ')',backgroundSize:'cover'}"></a></div>
   <div class="mui-slider-item" v-for="cc in banners"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" :style="{backgroundImage: 'url(' + cc.src+ ')',backgroundSize:'cover'}"></a></div>
   <div class="mui-slider-item mui-slider-item-duplicate"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" :style="{backgroundImage:'url('+banners[0].src+')',backgroundSize:'cover'}"></a></div>
  </div>
  <div class="mui-slider-indicator">
   <div class="mui-indicator mui-active"></div>
   <div class="mui-indicator"></div>
   <div class="mui-indicator"></div>
   <div class="mui-indicator"></div>
  </div>
  </div>

我绑定完数据之后,发现轮播图失效了,因为我之前用原生js写的时候遇到过同样的问题,我当时的解决办法是等页面加载完成后重新进行滑动初始化,但是今天用vue我蒙了,试了很多生命周期函数也无法确保在页面加载完成后进行初始化。

vue.js更多的希望是通过数据绑定来代替直接通过dom操作,而vue并没有提供渲染完成的钩子。

所以我今天的解决办法是:setTimeout()

在实例化VUE对象后添加下面代码:

setTimeout(function(){
  console.log($('#slider').length);
  var gallery = mui('.mui-slider');
  gallery.slider({
   interval: 3000//自动轮播周期,若为0则不自动播放,默认为0;
  });
  },1000);

以上这篇VUE DOM加载后执行自定义事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
详解JavaScript事件循环机制
Sep 07 #Javascript
解决vue 引入子组件报错的问题
Sep 06 #Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 #Javascript
vue 解决循环引用组件报错的问题
Sep 06 #Javascript
vue slots 组件的组合/分发实例
Sep 06 #Javascript
React注册倒计时功能的实现
Sep 06 #Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
php实现的MySQL通用查询程序
2007/03/11 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
js实现时间日期校验
2020/05/26 Javascript
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
python树的同构学习笔记
2019/09/14 Python
pycharm导入源码的具体步骤
2020/08/04 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
社区十八大感言
2014/01/19 职场文书
对标管理实施方案
2014/03/12 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
校园标语大全
2014/06/19 职场文书
护士实习求职信
2014/06/22 职场文书
室内趣味活动方案
2014/08/24 职场文书