vue 一个轮播的组件

当我们进行开发的时候，并不是说所有信息都会在写一个组件中

作为项目的老大，我们要去思考每个文件下面需要放什么业务，分的越细、越合理为好

我们在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生命周期中的钩子函数