将jquery轮播图修改为vue轮播图

修改时有几个坑需要注意：

• jq和vue的事件绑定会有冲突，需要将jq的事件绑定修改为在html元素上使用v-on
• jq绑定事件时，可以将同类名的所有元素都一起绑定，例如：$(‘little_img’).click(function(){}),function里面可以使用$(this)来获取当前元素。vue在绑定事件时，是在html元素上绑定，要获取当前元素需要使用function($event),例如：标签 ，要获取当前元素，需要在js里使用e.target或者e.currentTarget(target和currentTarget的区别是: target:触发事件的元素。currentTarget:事件绑定的元素。 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了),这种情况下需要使用e.currentTarget。获取所有元素时，只能使用$(‘元素选择器’)
• jq使用show()和hide()方法时，和vue使用v-show的原理是一样的，所以可以先在元素上使用v-show()，然后在js使用$().hide(),来更换元素的显示或者隐藏效果
• 定时器在使用时，传递方法时不要加括号，例如：

this.timer = setInterval(this.auto_play, 2000); //定时器引用方法时，不用加括号

• 定时器在轮播图使用时，要在页面渲染完之后调用，在鼠标悬停在图片上时清除定时器，在鼠标离开图片时再创建定时器。但在是vue中，没有鼠标悬停的方法，我们可以使用@mouseenter,@mouseleave
• 在引用变量时，要放在data中

原代码：

    
    
    
    
    








       
    
        
            首页
             >
            国内游 >
            全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认
        
        
            

                

                    
                
                

                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                
            
            
               
【尾单特卖】全国-曼谷6-7天自由行 泰国出境旅游 特价往返机票自由行二次确认
                
1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！
                
                    
经营商家  ：黑马国旅
                    
咨询电话 : 400-618-9090
                    
地址 ： 传智播客黑马程序员
                
                
                    
¥2699.00起
                    

                        点击收藏

                        点击收藏
                        已收藏100次
                    
                        
            
        
        
            旅游须知
            
                
1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 


                
2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。

                
3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。

                
4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。

                
5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。
                
1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 


                
2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。

                
3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。

                
4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。

                
5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。
                       
        
    
    

    
    
        
    
    
    
    
    
    
    

修改后代码：

这里使用的是ajax访问数据库获得的数据，与上面的代码不同，请各位自行准备数据测试

    
    
    
    
    






       
    
        
            首页
             >
            国内游 >
            {{travel.rname}}
        
        
            

                

                    
                
                

                    
                    
                        
                    

                    
                
            
            
               
{{travel.rname}}
                
{{travel.routeIntroduce}}
                
                    
经营商家  ：{{travel.seller.sname }}
                    
咨询电话 : {{travel.seller.consphone}}
                    
地址 ： {{travel.seller.address}}
                
                
                    
¥{{travel.price}}起
                    

                        点击收藏

                        点击收藏
                        已收藏100次
                    
                        
            
        
        
            旅游须知
            
                
1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 


                
2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。

                
3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。

                
4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。

                
5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。
                
1、旅行社已投保旅行社责任险。建议游客购买旅游意外保险 


                
2、旅游者参加打猎、潜水、海边游泳、漂流、滑水、滑雪、滑草、蹦极、跳伞、滑翔、乘热气球、骑马、赛车、攀岩、水疗、水上飞机等属于高风险性游乐项目的，敬请旅游者务必在参加前充分了解项目的安全须知并确保身体状况能适应此类活动；如旅游者不具备较好的身体条件及技能，可能会造成身体伤害。

                
3、参加出海活动时，请务必穿着救生设备。参加水上活动应注意自己的身体状况，有心脏病、冠心病、高血压、感冒、发烧和饮酒及餐后不可以参加水上活动及潜水。在海里活动时，严禁触摸海洋中各种鱼类，水母，海胆，珊瑚等海洋生物，避免被其蛰伤。老人和小孩必须有成年人陪同才能参加合适的水上活动。在海边游玩时，注意保管好随身携带的贵重物品。

                
4、根据中国海关总署的规定，旅客在境外购买的物品，在进入中国海关时可能需要征收关税。详细内容见《中华人民共和国海关总署公告2010年第54号文件》。

                
5、建议出发时行李托运，贵重物品、常用物品、常用药品、御寒衣物等请随身携带，尽量不要托运。行李延误属于不可抗力因素，我司将全力协助客人跟进后续工作，但我司对此不承担任何责任。