对比swiper5轮播图对vuecli项目的推测
在学习利用swiper插件构建轮播图时,查看了利用原生js和vuecli项目搭建中的用法,通过对比来了解vue底层构建:
让我们一起来看一下我搭建的原生js
在javascript中:
在原生js中就是创建了一个Swiper对象且传入参数‘.swiper-container’和’swiper-button-next‘,‘.swiper-button-prev’参数构成的object对象,对html页面进行渲染,来完成js对html的传导
ok,很好理解
在vue中:
这里是html
在index.vue中我们观察,首先利用v-bind:对html的dom进行单向绑定,传入参数对象swiperOption,利用swiperOption设定的值来达到更改效果
swiperOption绑定整个
在swiperOption中设置键值对pagination进行挂载