vue.js使用swiper插件

swiper是我之前做前端页面会用到的一个插件，我自己认为是非常好用的。swiper提供了形式多种多样、适应各个终端的轮播图效果。本人前端菜鸟，最近在学习vue，也正式开始在项目中使用vue.js来构建页面。

按照之前做带有动态数据轮播的方法，我肯定会用ajax来渲染。用过了vue.js之后，发现它渲染数据还是相对来说比较方便的。下面是我初次在项目中使用vue.js：

1、首先在项目中安装vue

2、在main.js中引入swiper

require('swiper/dist/css/swiper.css')
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3、HTML代码部分：

    

	
	    

		

		
活动时间：
	    
	
    

4、js代码：

var activity=new Vue({
    el:"#activityList",
    data:{
    actList:[],
    getActUrl:'你的URL'
},created:function(){
    this.getAct()//接口定义方法
},methods:{
    getAct:function(){
        var that=this;
        that.$http({
        method:'GET',
        url:this.getActUrl
    }).then(function(response){
            this.actList=response.data;
            var mySwiper = new Swiper('.swiper-container', {  
            autoplay: 2000            
            })  

},function(error){
     })
}
}
});