我们现在将学习的Vue知识应用一下,去实现简单轮播图效果,下面我们来一起看一下实现过程。
1、在HBuildX中使用vue-cli创建vue项目,名为lbt
2、删除无用文件,如图:
3、修改index.html
如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>演示轮播图</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
4、修改App.vue
如下(清空组件、模板、样式):
<template> <div id="app"> </div> </template> <script> export default { name: 'app', components: { } } </script> <style> </style>
5、修改main.js
,去掉Vue.config.productionTip = false
即可
以上基本项目准备已经完成。
1、在assets
目录下,新建images
文件夹,从网上下载几张图片,放在其中,以便演示,我这里从淘宝首页下载了3张,大小520*280
2、在assets
目录下,新建style
目录,在目录中新建名为global.css
的全局样式文件,内容如下
*{ padding: 0; margin: 0; }
3、在main.js中导入全局样式
//导入全局样式 import './assets/style/global.css'
注意一定要以./
开头。
4、在components
目录下新建名为Lbt.vue
的轮播图组件
5、在Lbt.vue
中输入vbase
快速创建组件基础模板:
模板代码如下:
<template> <div> </div> </template> <script> export default { } </script> <style scoped> </style>
6、开始开发轮播图组件,代码如下:
<template> <!-- 轮播图模板 --> <div class="out"> <div class="btn btn-left" @click="prePic"><</div> <img class="pic" :src="pics[num].imgUrl" alt=""/> <div class="btn btn-right" @click="nextPic">></div> </div> </template> <script> // 默认导出组件 export default { name:'Ltb', data(){ return{ // 记录图片数组索引 num: 0, // 图片数组,图片地址绑定需要使用require pics: [ {imgUrl:require("../assets/images/pic1.jpg")}, {imgUrl:require("../assets/images/pic2.jpg")}, {imgUrl:require("../assets/images/pic3.jpg")}, ] } }, methods:{ // 上一个图片 prePic(){ if(this.num == 0){ this.num = this.pics.length-1; }else{ this.num--; } }, // 下一个图片 nextPic(){ if(this.num == this.pics.length-1){ this.num = 0; }else{ this.num++; } } } } </script> <!-- 组件样式代码 scoped限制样式范围只在该组件有效--> <style scoped> .out { width: 520px; height: 280px; margin: 100px auto; position: relative; } .out .btn { width: 30px; height: 60px; color: white; background: rgba(0,0,0,0.3); position: absolute; top: calc(50% - 30px); line-height: 60px; text-align: center; font-size: 20px; font-family: "宋体"; cursor: pointer; } .out .btn-left { left: 0; } .out .btn-right { right: 0; } </style>
注意:使用vue-cli,在template中图片如果使用绑定方式,则在data中的图片地址必须要使用
<img class=”pic” src=”../assets/images/pic1.jpg” alt=””/>
是能够正常显示的。
require
引入之后才能显示,否则无法显示,因为vue-cli会将图片打包到img
目录下。但是如果在temeplate中直接引用如下:<img class=”pic” src=”../assets/images/pic1.jpg” alt=””/>
是能够正常显示的。
7、在App.vue
中引入、注册、使用Lbt.vue组件
<template> <div id="app"> <!--3、使用组件 --> <Lbt></Lbt> </div> </template> <script> // 1、导入组件 import Lbt from './components/Lbt.vue' export default { name: 'app', ///2、注册组件 components: { Lbt } } </script> <style> </style>
8、运行到浏览器访问,成功实现轮播效果
9、我们这里只实现了点击轮播,有兴趣的可以再自行实现自动轮播效果