VUE第六天学习

VUE第六天学习
Vue学习记录第六天
Vue学习的第六天
手把手教你Vue从零撸一个迷你版MVVM框架
刻意练习90-1-6
vue使用拖拽组件
vue2 基础学习02 （Vue组件）
Vue学习的路径
vue-oneday学习指令
Vue学习总结（2019.7.31-8.4）

内容：轮播图、热歌榜、推荐页和热歌榜、歌曲播放功能

一、轮播图

接口地址：

localhost:3000/banner?type=1

插件：

vue-awesome-swiper

1.安装

npm install vue-awesome-swiper --save

2.使用

在/src/main.js【全局】

// 引入swiper插件
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 引入swiper插件的样式【重要】
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

在推荐页面中添加如下代码

//引入组件
import { swiper, swiperSlide } from 'vue-awesome-swiper'
//注册组件
components:{
     swiper,
     swiperSlide
}
//页面结构
<swiper class="swiper" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
     <!-- slides -->
     <swiper-slide v-if="banners.length>0" v-for="banner of banners" :key="banner.bannerId">
          <img :src="banner.pic" />
     </swiper-slide>
     <!-- 分页器 -->
     <div class="swiper-pagination"  slot="pagination"></div>
     <div class="swiper-button-prev" slot="button-prev"></div>
     <div class="swiper-button-next" slot="button-next"></div>
     <div class="swiper-scrollbar"   slot="scrollbar"></div>
 </swiper>
 
<script>
 data(){
    swiperOption:{}
 },
 methods:{
    callback(){}
 }
</script>

swiper配置选项

autoplay:自动播放

speed:播放速度（毫秒）

loop:布尔值如果是动态数据，需要给swiper标签添加一个v-if就可以使用

// 分页器
pagination:{
el:'.swiper-pagination',//分页器容器
clickable:true,//分页器可点击
},
// 左右两边的导航按钮
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev'
}

二、axios发起多个网络请求

第一步：把每一个网络请求以函数方式定义，直接返回【不要做任何处理】

getBanner(){
    // 请求轮播图接口
    return axios.get('/music/banner?type=1')
},
getPersonalized(){
     return axios.get('/music/personalized')
}

第二步：在页面挂载完成的钩子函数中利用axios的all方法发起多个网络请求

//一次性发起多个网络请求
axios.all([this.getBanner(),this.getPersonalized()])
      .then(axios.spread((banners,result)=>{
           this.banners = banners.data.banners;
           this.arr = result.data.result;
      }))

三、其他像素单位

vw 计算的时整个视图窗口的宽度，包括滚动条，而100%不包括滚动条。

vh 计算的时整个视图窗口的高度，包括滚动条，而100%不包括滚动条。

四、接口地址优化

如果项目中页面组件较多，并且都有相同前缀的请求地址，为了能够提高项目的可维护性，可以预先把项目中需要请求的接口地址都定义好，然后导出。

示例代码：

接口配置文件(/src/common/js/api.js)

var banner = '/music/banner?type=1';//轮播图
var personalized = '/music/personalized?limit=9';//推荐歌单
var hot = '/music/top/list?idx=1';//热歌榜
export default{
    banner,personalized,hot
}

然后在/src/main.js中，将接口地址配置数据挂到原型链上，这样所有的页面组件都可以使用了。

//引入接口地址配置文件
import apis from './common/js/api'
Vue.prototype.api = apis

使用：

this.http({
    url:this.api.hot//此处url地址就是从接口地址配置中获取的变量
}).then(result=>{
    this.songs = result.data.playlist.tracks;
    this.time = result.data.playlist.updateTime
})

这样做的好处是：如果后续接口地址规则有变化，只需要在接口地址配置文件中进行修改即可，项目页面组件中不用进行任何修改。