一些vue笔记

 

https://www.swiper.com.cn/

我们自己实现轮播图大多使用js或者css的动画,进入这个网站可以直接复制源码进行实现

在vue项目的不同组件中使用swiper,有几个需要注意的点

Npm I vue-router-swiper

Npm I swiper@5

两行代码在项目文件夹的命令行中进行资源配置

一定要下载swiper5版本的swiper

这样就可以使用swiper的轮播图进行方便快捷的网页设计

 

 

值得注意的是,如果希望渲染一些异域api中的数据

还需要另外配置一个node项目,在app.js中设置一些有关异域数据传输的代码环境

这里不过多赘述

在vue文件夹下的js中配置以下代码

import axios from 'axios'


let baseUrl='http://localhost:3000'
//获取轮播图的api/banner?type= 0,1,2,3,0:pc,1:android,2:iPhone,3:ipad
export function getBanner(type=0){//加默认值0
    //模板字符串,${}变成变量,``解析变量
    return axios.get(`${baseUrl}/banner?type=${type}`)
}

这里引用的axios就是一个Ajax的封装库,可以在vue项目文件中命令行进行资源下载

Npm I axios

BaseUrl就是我们链入node项目的一个值,后面的网址就是node app之后打开的网址,端口号是3000

获取轮播图的api/banner?type= 0,1,2,3,0:pc,1:android,2:iPhone,3:ipad

这里的api/banner?type=1就是异域的api获取链接,通过这个type的值来选择

Type的值有四个:0是pc端,1是安卓端,2是iPhone端,3是iPad端

下面设置的是获取数据的函数,getBanner,type如果不设置则默认值是0

下面的${}是用来将这个baseUrl转换成变量的,而解析变量肯定不能使用””来解析,所以在这里使用了可以解析变量的``

 

最后在vue要使用swiper的组件中import引入刚刚配置好的函数getBanner(此处要注意路径是否正确)

async mounted() {

    //调用请求轮播图图片的函数,拿到轮播图数据

    let res= await getBanner(1)

    this.imgs=res.data.banners.slice(0,3)

    console.log(res)

    var mySwiper = new Swiper('#swiperIndex',{

        //配置分页器

        pagination:{

            el:".swiper-pagination",

            clickable:true,//分页器是否可以点击

        }

    })

}

这些就是我们在组件中调用函数和获取数据的代码(包含了一个分页器的函数)

因为是异域,使用要在mounted前加上async

现将获取的数据保存到res中,再将res中需要的数据定义到imgs中,这样我们就可以使用getBanner获取的数据,将imgs(获取的数据)放在template中渲染即可(v-for)

<div class="swiper-slide" v-for="(item,i) in imgs" :key="i">

    <img :src="item.pic" alt="">

</div>