宜宾网站建设公司

VUE中如何实现DOM加载后执行自定义事件-创新互联

这篇文章将为大家详细讲解有关VUE中如何实现DOM加载后执行自定义事件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联是一家专注于成都网站设计、做网站与策划设计,越秀网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:越秀等地区。越秀做网站价格咨询:18980820575

最近想用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框架中提供的图片轮播（移动端，支持手势滑动），问题恰恰就这里：


  
   
   
   
  
                        

我绑定完数据之后，发现轮播图失效了，因为我之前用原生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加载后执行自定义事件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


本文题目：VUE中如何实现DOM加载后执行自定义事件-创新互联
文章起源：http://ybzwz.com/article/dhjooo.html

其他资讯