一个扁平化项目展示页

这是一个扁平化风格的项目展示页面,风格类似于IFTTT。

Demo:lab.mayuko.cn

屏幕快照 2017-10-25 20.26.06.png

框架

  • Bootstrap(栅格化布局)
  • Vue

特点

  • 扁平化,响应式!
  • 可爱的loading动画!
  • 使用了Vue!

没错,最近在入Vue的坑,所以写了一个简单的页面来熟悉一下Vue。@(委屈)

动画

感觉超级棒的Loading,无耻的设置了1000ms的setTimeout。

2017-10-25 21_17_26.gif

代码

投食在Github,如果你也喜欢,求star。

总结

用到了Vue的以下:

1.组件

生成了一个card-item组件,并注册为全局组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template id="card-item">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="card" :class="color">
<div class="card-hd">
<h1 class="card-hd__title"><li class="fa" :class="icon"></li></h1>
</div>
<div class="card-bd">
<h1>{{title}}</h1>
<h4>{{desc}}</h4>
</div>
<div class="card-ft">
<div class="col-xs-6 text-left">
<li class="fa fa-clock-o">&nbsp;{{time}}</li>
</div>
<div class="col-xs-6">
<a v-bind:href="url" target="_blank">查看Demo</a>
</div>

</div>
</div>
</div>
</template>

全局注册,并将参数传递给组件:

1
2
3
4
Vue.component('card-item', {
template: '#card-item',
props: ['title', 'desc', 'icon', 'time', 'url', 'color'],
})

2.指令

  • v-bind || :
  • v-on || @
  • v-for
  • v-show
1
2
3
4
5
6
7
8
9
10
11
<div class="container lab-body" id="card">
<div class="row">
<card-item v-for="item in itemArr" :key="item.key" :title="item.title" :desc="item.desc" :icon="item.icon" :time="item.time" :url="item.url" :color="item.color"></card-item>
</div>
<div class="mod model-3 loader" v-show="loading">
<div class="spinner"></div>
</div>
<p class="card-more">
<a class="card-btn" @click="isMore && loadMoreData()" v-show="isMore">{{moreText}}</a>
</p>
</div>

3.请求

网络请求使用了vue.resource。

1)引入js

1
2
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-resource.js"></script>

2)网络请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
this.$http.get(
'get.php', {
params: {
page: this.page,
count: this.count
}
}
).then(res => {
if (res.data.code == 200) {
console.log(res.data)
} else {
console.log('error')
}
}, response => {
console.log("error")
})

4.新的IDE

从Sublime Text3弃坑入坑到Atom,看惯了phpStorm和Sublime Text的配色,新的Atom配色简直太爽了~

屏幕快照 2017-10-25 21.21.47.png

Banner来源:Apple Inc. WWDC宣传海报。

#EOF

 加载Disqus评论