当我们进行开发的时候,并不是说所有信息都会在写一个组件中
作为项目的老大,我们要去思考每个文件下面需要放什么业务,分的越细、越合理为好
我们在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. 利用Pandas和matplotlib分析我爱我家房租区间频率

    前几天利用python爬取了我爱我家的租房的一些数据,就想着能不能对房租进行一波分析,于是通过书籍和博客等查阅了相关资料,进行了房租的区间分析.不得不说,用python做区间分析比我之前用sql关键字 ...

  2. 【CF1252J】Tiling Terrace(DP)

    题意:有一个长为n的串,每个字符是#或者.中的一个,#不超过50个 有3种覆盖串的方式:(.),(..),(.#.),分别能获得g1,g2,g3的收益,覆盖之间不能重叠 第一种方式不能使用超过K次,问 ...

  3. CF 696 A Lorenzo Von Matterhorn(二叉树,map)

    原题链接:http://codeforces.com/contest/696/problem/A 原题描述: Lorenzo Von Matterhorn   Barney lives in NYC. ...

  4. es之得分(加权)

    随着应用程序的增长,提高搜索质量的需求也进一步增大.我们把它叫做搜索体验.我们需要知道什么对用户更重要,关注用户如何使用搜索功能.这导致不同的结论,例如,有些文档比其他的更重要,或特定查询需强调一个字 ...

  5. UVALive 6855 Banks (暴力)

    Banks 题目链接: http://acm.hust.edu.cn/vjudge/contest/130303#problem/A Description http://7xjob4.com1.z0 ...

  6. vue中移动端自适应方案

    安装 lib-flexible 1.npm i lib-flexible 2.在项目入口文件 main.js 里 引入 lib-flexible import ‘lib-flexible’ 3.添加m ...

  7. How to call javascript function on page load in asp.net

    How to call javascript function on page load in asp.net 解答1,使用RegisterStartupScript来运行 需要注意的是,下面的dem ...

  8. win7不正常开关机,系统恢复选项

    会win7不正常开关机后,会默认进入“系统回复选项”. 无人值守的机器远程会无法连接,默认会进入此界面. 解决方法: 到现场,鼠标.键盘.显示器, 开机后选择正常启动, 在命令行模式输入以下命令bcd ...

  9. React Native商城项目实战09 - 个人中心自定义cell

    1.新建组件CommonMyCell.js /** * 个人中心自定义cell */ import React, { Component } from 'react'; import { AppReg ...

  10. easyui表格适应bootstrap

    .panel1 { overflow: hidden; text-align: left; margin:; border:; -moz-border-radius: 0 0 0 0; -webkit ...