一个扁平化项目展示页

October 25, 2017 • 开发

这是一个扁平化风格的项目展示页面,风格类似于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组件,并注册为全局组件。

<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>

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

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

2.指令

  • v-bind || :
  • v-on || @
  • v-for
  • v-show
    <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

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

2)网络请求

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

Tags: None
7 条评论
  1. 好看好看

    1. @晴和君@(太开心)

  2. 实验室底部的 API 链接打错了(一个点)

    1. @mengkun感谢!@(太开心)

  3. 大佬又有新项目了……

    1. @liwanglin12@(笑尿)是为了练一下VUE嘛

  4. 大佬又有新项目了……

Leave a Comment