将jquery轮播图修改为vue轮播图 修改时有几个坑需要注意:
jq和vue的事件绑定会有冲突,需要将jq的事件绑定修改为在html元素上使用v-onjq绑定事件时,可以将同类名的所有元素都一起绑定,例如:$(‘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中原代码:
猜你喜欢
