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获取url参数的使用扩展实例
Dec 29 Javascript
JavaScript的9个陷阱及评点分析
May 16 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
js数组实现权重概率分配
Sep 12 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
JavaScript对象学习经验整理
2013/10/12 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
解析Python编程中的包结构
2015/10/25 Python
Python中logging实例讲解
2019/01/17 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
Pytorch之保存读取模型实例
2019/12/30 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
幼儿园保教管理制度
2014/02/03 职场文书
师说教学反思
2014/02/07 职场文书
计算机专业自荐信
2014/05/24 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
工作经历证明范本
2015/06/15 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
Python字符串的转义字符
2022/04/07 Python
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
vue3不同环境下实现配置代理
2022/05/25 Vue.js