当我们进行开发的时候,并不是说所有信息都会在写一个组件中
作为项目的老大,我们要去思考每个文件下面需要放什么业务,分的越细、越合理为好
我们在componts文件下新建一个Banner.vue 组件
第一种情况,如果我们不使用路由,我们可以直接在需要引入的组件下:
 
第一步:import Banner from " path " 引入组件  
第二步:导入组件,export default  中components:{ Banner },
第三步:在template 中引入组件<Banner />
 
 
 
 
引入图片在src 中,写基本的html 框架,css引入,页面中的轮播用v-for遍历出来。在data中写入图片的路径,但是如果我们直接写
data(){
    return{
          img:[
             “img/banner1.png”,
              "img/banner2.png"
         ]
     }
}
 
这样的写法是引入不到的,如果是在data 中引入图片,我们需要添加一个require:
data(){
    return{
           img:[
                   require(“img/banner1.png”),
                  require("img/banner2.png")
         ]
     }
}

这是因为当我们的项目开发完成之后,项目进行打包build 的时候,我们都会进行webpack打包,但是在打包的时候,webpack 会默认的解析为字符串,所以要使用require() 方式。

 
接着我们在methods 中加入方法,在平常我们使用js写代码的时候,封装的函数,就可以放到这个里面
mounted 中 this.fun()自运行,进行挂载
 
methods、mounted都是vue生命周期中的钩子函数

vue 一个轮播的组件的更多相关文章

  1. vue自定义轮播图组件 swiper

    1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...

  2. vue编写轮播图组件

    <template>  <div id="slider">    <div class="window" @mouseover=& ...

  3. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  4. Vue实现音乐播放器(七):轮播图组件(二)

    轮播图组件 <template> <div class="slider" ref="slider"> <div class=&qu ...

  5. 七、Vue组件库:Element、Swiper(轮播专用组件)

    一.vue的Element组件库 官网:https://element.eleme.cn/#/zh-CN 1.1安装 推荐安装方法: 首先要进入项目目录 cnpm i element-ui -S 或 ...

  6. vue移动音乐app开发学习(三):轮播图组件的开发

    本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...

  7. Vue2 轮播图组件 slide组件

    Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...

  8. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  9. 03 uni-app框架学习:轮播图组件的使用

    1.轮播图组件的使用 参照官方文档 2.在页面上加入这个组件 3.在页面中引去css样式 并编写样式 ps:upx单位是什么 简单来说 就相当于小程序中的rpx 是一个自适应的单位 会根据屏幕宽度自动 ...

随机推荐

  1. Linux学习-samba服务

    一.Samba介绍 Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成. SMB (Server Messages Block,信息服务块) 是一种在局域网 ...

  2. DNS域名解析系统

    1.DNS的组成 DNS系统是为解析域名为IP地址而存在的,它是由域名空间.资源记录.名称服务器和解析器组成. 域名空间是包含一个树状结构,用于存储资源记录的空间. 资源记录是与域名相关的数据,如IP ...

  3. 6359. 【NOIP2019模拟2019.9.15】小ω的树(tree)(定期重构)

    题目描述 题解 qy的毒瘤题 CSP搞这种码农题当场手撕出题人 先按照边权从大到小建重构树,然后40%暴力修改+查找即可 100%可以定期重构+平衡规划,每次把B个询问拉出来建虚树,在虚树上暴力维护每 ...

  4. React Native 之组件的定义

    App.js 也可以认为是一个组件,那么此文件中能定义多个组件吗? 方式一 import Hello from './Hello' export default class App extends C ...

  5. docker 内时区和宿主机差8个小时,怎么办?

    docker run -d -it --name tt -e TZ=Asia/Shanghai -p : api 使用-e参数指定时区

  6. Vue框架基础概要

    Vue.js是什么? Vue.js(读音 /vjuː/,类似于 view 的读音)是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本 ...

  7. [CF938E]Max History题解

    题面 >CF传送门< >洛谷传送门< 解法 显而易见,对于一个数\(a_i\),若果它出现在\(f\)序列中,必定\(a_i\)之前的元素要小于\(a_i\),我们设\(cnt ...

  8. 基于Cesium的Web3d实现二三维室内外一体化融合

    https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=3D%20Models.html 三维建模 BIM

  9. wap开发tips

    1.overflow-x 这真的是一个大坑,一旦你在body或者html上用了这个属性,对不起,如果你的页面出现滚动条的话,那就会出现莫名其妙的bug,滑动页面的时候fix在顶部或者底部的会挡住. 解 ...

  10. ORACLE DG临时表空间管理

    实施目标:由于磁盘空间不足,将主库的临时表空间修改位置 standby_file_management 管理方式:AUTO SQL> show parameter standby_file NA ...