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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
详解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
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
python实现txt文件格式转换为arff格式
2018/05/31 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
自荐信封面
2013/12/04 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
商业街策划方案
2014/05/31 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
承诺书模板大全
2015/05/04 职场文书
小学语文国培研修日志
2015/11/13 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python