<script>
  export default {
  name: 'hello-swiper',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
       swiperOption: {
          autoplayStopOnLast: true,
          onTransitionEnd(swiper) {
            console.log(swiper.isEnd)
          },
          onReachEnd(swiper) {
          	console.log(swiper.isEnd);
            //怎么在此访问此vue的实例this
            reviseMsg();
          }
        }

    }
  },
  methods: {
        //我要在动画结束后调用此vue的实例this，怎么弄？？？
  	reviseMsg() {
  		this.message = 'swiper is finishing'
    }
  }
}
</script>

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
} else {
  return ['vue-style-loader', sourceLoader].join('!')
}

/ or use with component
import Vue from 'vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

// use
export default {
  components: {
    swiper,
    swiperSlide
  }
}

ERROR in ./~/swiper/dist/css/swiper.css
Module parse failed: /....../node_modules/swiper/dist/css/swiper.css Unexpected token (15:0)
You may need an appropriate loader to handle this file type.
|  * Released on: December 13, 2016
|  */
| .swiper-container {
|   margin-left: auto;
|   margin-right: auto;
 @ ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"]}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-awesome-swiper/swiper.vue 18:2-39
 @ ./~/vue-awesome-swiper/swiper.vue
 @ ./~/vue-awesome-swiper/index.js
 @ ./plugins/vue-touch.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?reload=true ./.nuxt/client.js

require('imports-loader?this=>window,exports=>false,define=>false!../lib/swiper.animate1.0.2.min.js');

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

require('imports-loader?this=>window,exports=>false,define=>false!../lib/swiper.animate1.0.2.min.js');

import App from './App.vue'

Vue.use(VueAwesomeSwiper)

new Vue({
  el: '#app',
  render: h => h(App)
})

ERROR in ./~/swiper/dist/css/swiper.css
Module parse failed: /Users/aaronpitts/Sites/new/node_modules/swiper/dist/css/swiper.css Unexpected token (15:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (15:0)
    at Parser.pp$4.raise (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/aaronpitts/Sites/new/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/aaronpitts/Sites/new/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/aaronpitts/Sites/new/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/aaronpitts/Sites/new/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/aaronpitts/Sites/new/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/Users/aaronpitts/Sites/new/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/aaronpitts/Sites/new/node_modules/graceful-fs/graceful-fs.js:76:16
    at fs.js:334:14
    at /Users/aaronpitts/Sites/new/node_modules/graceful-fs/graceful-fs.js:42:10
    at FSReqWrap.oncomplete (fs.js:95:15)
 @ ./~/babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-awesome-swiper/swiper.vue 10:2-39

var SwiperComponent = require('./swiper.vue')
var SlideComponent = require('./slide.vue')
var swiper = {
  swiperSlide: SlideComponent,
  swiper: SwiperComponent,
  install: function (Vue) {
    Vue.component('swiper', SwiperComponent)
    Vue.component('swiper-slide', SlideComponent)
  }
}
module.exports = swiper

<style src="swiper/dist/css/swiper.css"></style>
<script>
var Swiper
export default {
  name: 'swiper',
  props: {
    options: {
      type: Object,
      default: function() {
        return {
          autoplay: 3500
        }
      }
    },
  },
  ready: function() {
    if (!this.swiper && typeof global.window != 'undefined') {
      Swiper = require('swiper')
      this.swiper = new Swiper(this.$el, this.options)
    }
  },
  mounted: function() {
    if (!this.swiper && typeof global.window != 'undefined') {
      Swiper = require('swiper')
      this.swiper = new Swiper(this.$el, this.options)
    }
  },
  updated: function() {
    this.swiper.update()
  },
  beforeDestroy: function() {
    if (!!this.swiper) {
      this.swiper = null
      delete this.swiper
    }
  }
}
</script>

data: function () {
      return {
        swiperOption: {
          name: 'currentSwiper',
          autoplay: '3000',
          pagination: '.swiper-pagination',
          paginationClickable: true,
        }
      };
    },

<swiper :options="swiperOption" id="carrousel" ref="mySwiperA">
      <swiper-slide class="slide bg_lazyload" lazy="loading" v-for="banner in indexData.banner_list"
                    v-bind:data-image="banner.image"><a href=""></a></swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>

data () {
        return {
            swiperOption: {
                autoplay: 50000,
                notNextTick: true,
                pagination: '.swiper-pagination',
                onInit: function (swiper) {
                     console.log(swiper.slides.length)//这里是0，怀疑是没有渲染到dom，有人告诉我，具体怎么获取ajax返回图片个数？
                },
                onSlideChangeStart: function(){

                },
                onSlideNextEnd: function (swiper) {
                    // console.log(swiper);
                }
            },
            indexData: [],
            swiperSlides: 0
        }
    },
    computed: {
        swiper () {
            return this.$refs.mySwiperA.swiper
        }
    },
    mounted: function () {
        this.$http.get('../../../static/api/home/home.json').then((response) => {
            this.indexData = response.data
            this.swiperSlides = response.data.banner_list.length//2
            console.log(this.swiperSlides)
        }, (response) => {
            console.log(response)
        })
    }

<swiper-slide v-for="url in images">
        <img :data-src="url" class="swiper-lazy">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</swiper-slide>

<template>
    <swiper :options="swiperOption">
        <!-- 幻灯内容 -->
        <swiper-slide>
slider1        </swiper-slide>
        <swiper-slide>I'm Slide 7</swiper-slide>
        <!-- ... -->
        <!-- 以下配置均为可选（使用具名slot来确定并应用一些操作控件元素） -->
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
</template>
<style>
</style>
<script>
  import {swiper, swiperSlide, swiperPlugins} from 'vue-awesome-swiper'
  export default {
    name: 'carrousel',
    components: {
      swiper,
      swiperSlide
    },
    data() {
      return {
        swiperOption: {
          // 如果你后续需要找到当前实例化后的swiper对象以对其进行一些操作的话，可以自定义配置一个名字
          name: 'currentSwiper',
          // 所有配置均为可选（同Swiper配置）
          autoplay: 1000,
          direction: 'horizontal',
          grabCursor: true,
          autoHeight: false,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          scrollbar: '.swiper-scrollbar',
          // if you need use plugins in the swiper, you can config in here like this
          debugger: true,
          // swiper callbacks
          onTransitionStart: function (swiper) {
            console.log(swiper)
          },
          // more Swiper config ...
          // ...
        }
      }
    },
    // example code (if you need to get the current swiper object, find the swiper object in current component(vm) childrens)
    // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象
    computed: {
    },
    mounted() {
      // you can use current swiper object to do something(swiper methods)
    }
  }
</script>

 SyntaxError: Unexpected token (2:0) while parsing ~/node_modules/vue-awesome-swiper/swiper.vue while parsing file:
 ~/node_modules/vue-awesome-swiper/swiper.vue

 ~/node_modules/vue-awesome-swiper/slide.vue:1
 <template>
 ^

Cannot read property 'update' of undefined
    at VueComponent.updated (eval at <anonymous> (app.js:2093), <anonymous>:49:16)
    at callHook (eval at <anonymous> (app.js:821), <anonymous>:2754:19)
    at flushSchedulerQueue (eval at <anonymous> (app.js:821), <anonymous>:2831:7)
    at Array.eval (eval at <anonymous> (app.js:821), <anonymous>:473:20)
    at nextTickHandler (eval at <anonymous> (app.js:821), <anonymous>:422:16)