vue:created和mounted的区别 (使用swiper)

created:用来拿页面初次渲染需要的数据(不允许操作dom元素,只会执行一次) // 用来编译data数据及html模板语法
mounted:可以可以操作dom

1. 安装依赖后,使用swiper

npm i swiper

@import '../../../node_modules/swiper/css/swiper.css'

import Swiper from 'swiper

// cdn方式引入的话，在vue的html页面引
2. 调用后，出现了这个问题
是因为不在mounted()中调用new swiper()函数，否则就会问题。

示例代码

<template >
  <div class="page">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {

  data () {
    return {
    }
  },

  methods: {
    _initSwpier () {
      var swiper = new Swiper('.swiper-container', {
        autoplay: true // 可选选项，自动滑动
      })
      this.swiper = swiper
    }
  },

  mounted () {
    this._initSwpier()
  }
}
</script>

<style lang='stylus' scoped>
@import '../../node_modules/swiper/css/swiper.css'
</style>