技术栈: | @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”> ;</ i>】, ;是图标的名称代码;
- 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>