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 相关文章推荐
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
Vue声明式渲染详解
May 17 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
微信小程序实现点击效果
Jun 21 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 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
基于mysql的论坛(6)
2006/10/09 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python 如何在字符串中插入变量
2020/08/01 Python
Django框架请求生命周期实现原理
2020/11/13 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
社区党建工作方案
2014/06/10 职场文书
2014年度工作总结报告
2014/12/15 职场文书
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript