created:用来拿页面初次渲染需要的数据(不允许操作dom元素,只会执行一次) // 用来编译data数据及html模板语法
mounted:可以可以操作dom
- 安装依赖后,使用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>