vue - 实战网易云webapp版

技术栈：	@v1.0
Vue2：采用最新的Vue2的语法	1、vue基础博客
mintUI：Vue2的移动 UI 元素
Webpack：自动化构建工具，主要配置vue-cli脚手架提供
flex：弹性盒子布局，歌单、歌曲列表部分
Less：css预处理语言
阿里icon：图标部分用到 fontClass 和 Unicode
	vue 中文官网
github - keepfool 3、vue- keepfool大佬 (js 比较多)；
vue- axios使用	2、vue-实操步骤
	4、vue搭建移动端git
	5、vue引入bootstarp

功能介绍

v1.0 | 2019.03.08 (持续更新)

• 网易云（轮播，推荐歌单，最新音乐，热歌榜单，排行榜）
• 搜索（热门搜索）

拆解分析

1、Iconfont-阿里巴巴矢量图标库 用法：

• 1、在网页上更新图标，再复制（在线链接中）代码 + 一段.iconfont 样式代码（在使用帮助中有）；
• 2、新建css文件，把复制的代码贴进去，命名好名称；
• 3、在页面中引用样式表，最后贴结构 【< i class=“iconfont”>&#xe773 ;</ i>】，&#xe773 ;是图标的名称代码；
• 4、可以改变.iconfont 中的字体 大小和颜色；

2、表单列表，需求：盒子的 高度随宽度 而变化，不管怎样都是一个完整的 正方形（适合手机端）：

.m-care-item {
	display: inline-block;
	width: 33.333%;   //总的宽度
	padding: 0 5px;
	box-sizing: border-box;
	font-size: 14px;
}
.m-care-item .m-care-img {
	position: relative;
	padding-bottom: 100%; // 高度随宽度自动
	overflow: hidden;
}
.m-care-item .m-care-img .m-care-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

v-if 与 v-show：
1、v-if 条件渲染指令，根据表达式的 真假来添加或删除元素，返回一个true或false的表达式，而且只有满足条件才会渲染；	{{ ok ? ‘yes’ : ‘no’ }}
2、v-show 条件渲染指令，不同的是v-show 会始终将元素渲染并保存在dom中，且v-show是根据表达式真假值来切换元素的 dispaly css属性；	v-show = ‘show’
v-if 有更高的切换消耗，而v-show 则没有，适合做频繁切换
	——
v-bind - 动态的绑定一个或多个特性（属性），或一个组建prop到表达式	:src=""，:class="[ ]"

<!-- 弹出框 -->
<div class="m-popup-box" v-show="showUp">
    <div class="popup-item">
        <div class="popup-img">
            <img :src="images" alt="" class="img">
            <p class="popup-type" @click="showonUp"></p>
        </div>
    </div>
</div>
<script>
data () {
    return {
        showUp: true,
        images: 'http://img.zcool.cn/community/0144d55667f1486ac7259f6ee86924.png'
    }
},
methods:{
    showonUp: function(e) {
        this.showUp = false
    }
}
</script>
<style>
.m-popup-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0,0,0,.4);
    .popup-item {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 21.875rem;
        height: 21.875rem;
        margin: auto;
        .popup-img {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 35px;
            background: rgba(0, 0, 0, .2);
            .popup-type {
                position: absolute;
                top: 0;
                right: 0;
                width: 50px;
                height: 50px;
                z-index: 9999;
                border-radius: 50%;
            }
        }
        .img {width: 100%;}
    }
}
<style>