频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
vue中引用轮播图组件解析
2018-09-13 09:37:46           
收藏   我要投稿

vue中引用轮播图组件

1、首先是vue的组件库(官方的vue组件库地址):https://github.com/vuejs/awesome-vue
2、查找自己需要的组件:可以Ctrl+f 来快速搜索这些组件。
3、根据组件的使用指南进行引用(以引用轮播图实例):
1)npm 全局安装组件:npm install -S vue-carousel
2) 引用该组件(有两种方式):
a、全局引用:在main.js中引用。

import Vue from 'vue';
import VueCarousel from 'vue-carousel';
Vue.use(VueCarousel);
此时在该vue项目中都可以使用该组件。
b、在当前组件中引用:

import { Carousel, Slide } from 'vue-carousel';

export default { ... components: { Carousel, Slide } ... };

此时只能在该组件中使用。
4、在html中使用:

轮播的内容。 Slide 2 Content

5、相关参数的使用(都添加到 carousel 标签内。):

其中轮播的宽度由carousel的父节点宽度来决定。
相关api的查询地址:
https://github.com/SSENSE/vue-carousel/blob/master/docs/source/api/index.md

点击复制链接 与好友分享!回本站首页
上一篇:js函数作用域this解析
下一篇:h5中类jQuery选择器querySelector的使用解析
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站