一、数据获取
Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据。
- 关于axios插件的引入
在main.js中引入，但是 axios 并不能Vue.use，只能每个需要发送请求的组件中即时引入。为了解决这个问题，是在引入 axios 之后，修改原型链。
// main.js
// 导入Axios插件
import Axios from 'Axios';
// 如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性
Vue.prototype.$ajax = Axios;
// 其他组件，例如App.vue
export default {
created() {
// this.$ajax ==> Axios
this.$ajax.get('/api/seller')
.then( function(response) {
console.log(response);
})
.catch(function(error) {
console.log('获取数据失败:' + error);
});
},
}
安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()。
// 导入vue-router插件
import VueRouter from 'vue-router';
// 全局注册，在其他组件就是可以使用
Vue.use(VueRouter);
二、header界面
三、公告以及优惠信息 --- 详情弹层页
CSS sticky footers布局: Sticky footers设计是最古老和最常见的效果之一，可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。
<div v-show="detailShow" class="more">
<div class="detail-wrapper clearfix">
<div class="detail-main"></div>
</div>
<div class="detail-close"></div>
</div>
.more{
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
overflow: auto;
left: 0;
top: 0;
transition: all 1s;
background: rgba(7, 17, 27, 0.8);
}
.more .moreShow-wrapper{
/* 最小高度和视口一样*/
min-height: 100%;
}
.more .moreShow-wrapper .moreShow-main{
padding: 64px 0;
}
.more .moreShow-close{
position: relative;
width: 32px;
height: 32px;
/* 注意*/
margin: -64px auto 0;
}
四、star组件
export default {
// 父组件传递过来的两个参数
props: {
size:{ // 尺寸大小24, 36, 48
type: Number // 指定参数类型
},
score:{
type: Number
}
},
/*
计算属性computed的使用
描述：在同一个实例化对象中，其中一个属性改变，要求另外一个属性也跟着改变
*/
computed: {
// 传入尺寸不同，类名即不一样
starType() {
return 'star-' + this.size;
},
items() {
let result = [];
// 分数处理，只有整数和0.5
let score = Math.floor(this.score * 2) / 2;
let has = score % 1 !== 0; // 是否有小数
let integer = Math.floor(score); // 整数部分
// 点亮的星
for(let i=0; i<integer; i++){
result.push(CLS_ON);
}
if(has){ // 半星
result.push(CLS_HALF);
}
while(result.length < LENGTH){
result.push(CLS_OFF);
}
return result;
}
}
}
五、自适应经典flex布局
六、添加动画效果
<transition name="fade">
<p v-if="show">hello</p>
</transition>
// v对应的即是name属性
- v-enter: 过渡的开始状态(进入时)
- v-enter-to: 过渡的结束状态(进入时)
- v-enter-active: 定义过渡的过程时间，延迟和曲线函数(进入时)
- v-leave: 过渡的开始状态(离开时)
- v-leave-to: 过渡的结束状态(离开时)
- v-leave-active: 定义过渡的过程时间，延迟和曲线函数(离开时)
<transition name='fade'>
<div v-show="moreShow" class="more">
// ...
</div>
</transition>
作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论