老师想问下这个Vue-Awesome-Swiper插件如何加swiper配合vue工作,最终渲染成的

老师想问下这个Vue-Awesome-Swiper插件如何加swiper配合vue工作,最终渲染成的

看检查,最终是swiper Html结构

http://img1.sycdn.imooc.com//climg/5ced4663000185b308000334.jpg

基础组件引入import {swiper} from 'vue-awesome-swiper';  

这样是把swiper  html结构搭建起来吧

http://img1.sycdn.imooc.com//climg/5ced482c00011b1316301328.jpg

基础组件中,写的结构符合Vue-Awesome-Swiper,但还没有引入swiper-slide  ,只有swiper标签对,里面内容也只放了分页,通过参数判断最终插槽控制插入。

在业务组件中,自定义了一个类为slider-wapper 的div,里面放引入基础组件并命名me-slider,所以swiper Html结构最终是嵌入到它里面的。在业务组件里,还引入import {swiperSlide} from 'vue-awesome-swiper';这样就把swiperSlide标签对弄过来,这样基础组件和业务组件配合,变成Vue-Awesome-Swiper插件的结构,完成轮播功能,通过参数控制。

这里有几个疑惑

1,基础组件和业务组件是分别引入Vue-Awesome-Swiper吧,{ xx } 这里用括号方式的说明是变量吧

import MeSlider from 'base/slider';
import {swiperSlide} from 'vue-awesome-swiper';
import {sliderOptions} from './config';

像这里第一个,引入基础组件只需要这里命名MeSlider ,不用{  };

这里还有什么说明吗?

2,基础组件和业务组件都  from 'vue-awesome-swiper'

这样他们的div不会嵌套引入吗,就是swiper插件的div  HTML结构

3,Vue-Awesome-Swiper 里的变成swiper 里的div结构,应该是它源码上如何变了吧

4,希望老师能够对这些说明下,指出上面自己分析的内容错误

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
卡布琦诺 2019-05-29 19:23:50

1、import引入插件加与不加花括号,跟vue没关系,这是es6的语法,加{}是导入指定模块,不加是默认导入

2、第二条,同学的理解思路是可以的

3、第三条没太看懂他同学具体想要表达的是什么

建议再详细描述一下第三条问题哦

祝学习愉快!


提问者 阿感 2019-05-28 23:07:59
提问者 阿感 2019-05-28 23:05:35

针对2,猜测import {swiperSlide} from 'vue-awesome-swiper';

只引入了swiperSlide ……对应<swiper-slide>I'm Slide 1</swiper-slide>,不带div结构

import {swiper} from 'vue-awesome-swiper'这个是会把swiper  div结构都引进的,这样就不会嵌套了。估计还是需要vue-awesome-swiper  源码里查看它是如何改变swiper的来适应vue 组件化环境搭建

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
热门框架Vue开发WebApp 18版
  • 参与学习           人
  • 提交作业       209    份
  • 解答问题       3299    个

本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue,结合多个实战案例,还原真实开发场景,最终实现手机端购物商城网页开发。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师