swiper在vue的不使用router的使用方法

vue程式碼使用swiper.js時，不使用router！
下載 swiper.js檔案
下載完成，引入到HTML
方法一:在vue data 裡面定義一個物件用來初始化swiper，
在method裡面定義一個函式
在mounted裡面呼叫它；

 data：{
swiper：{}
},
mounted:function(){
this.swiperTo();
},
methods:{
              swiperTo:function(){
                this.swiper = new Swiper('.swiper-container1', {
								slidesPerView: 'auto', //重要 可以去swiper搜尋
								centeredSlides: true,   //重要
								paginationClickable: true,
								effect: 'left',
								spaceBetween: 30,
								direction: 'vertical', // 垂直切換選項
                                loop: true, // 迴圈模式選項
								observer: true,//修改swiper自己或子元素時，自動初始化swiper
								observeParents: true,//修改swiper的父元素時，自動初始化swiper
								initialSlide: photoIndex,//預設顯示在中心位置
								on: {
									slideChangeTransitionEnd: function(){
										//alert(this.activeIndex);//切換結束時，告訴我現在是第幾個slide
										}
								}
           });
              },
            },

方法二：
直接在mounted裡面定義使用swiper；

//使用
 mounted(){
        var swiper = new Swiper('.swiper-container1', {
								slidesPerView: 'auto', //重要 可以去swiper搜尋
								centeredSlides: true,   //重要
								paginationClickable: true,
								effect: 'left',
								spaceBetween: 30,
								direction: 'vertical', // 垂直切換選項
                                loop: true, // 迴圈模式選項
								observer: true,//修改swiper自己或子元素時，自動初始化swiper
								observeParents: true,//修改swiper的父元素時，自動初始化swiper
								initialSlide: photoIndex,//預設顯示在中心位置
								on: {
									slideChangeTransitionEnd: function(){
										//alert(this.activeIndex);//切換結束時，告訴我現在是第幾個slide
										}
								}
           });
    },

HTML：

<div class="swiper-container1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

通過文件檢視swiper對應屬性方法：swiper官方文件https://www.swiper.com.cn/usage/index.html#