通过swiper5了解vuecli脚手架的底层原理

对比swiper5轮播图对vuecli项目的推测

在学习利用swiper插件构建轮播图时,查看了利用原生js和vuecli项目搭建中的用法,通过对比来了解vue底层构建:
让我们一起来看一下我搭建的原生js
通过swiper5了解vuecli脚手架的底层原理

在javascript中:

在原生js中就是创建了一个Swiper对象且传入参数‘.swiper-container’和’swiper-button-next‘,‘.swiper-button-prev’参数构成的object对象,对html页面进行渲染,来完成js对html的传导
ok,很好理解

在vue中:

通过swiper5了解vuecli脚手架的底层原理这里是html
通过swiper5了解vuecli脚手架的底层原理
在index.vue中我们观察,首先利用v-bind:对html的dom进行单向绑定,传入参数对象swiperOption,利用swiperOption设定的值来达到更改效果
swiperOption绑定整个
在swiperOption中设置键值对pagination进行挂载

上一篇:基数排序原理及Java实现


下一篇:N51期第五次作业