Vue-Resource & JSONPlaceholder Example
A Pen by Timothy Olaleke on CodePen.
<div id="vueApp"> | |
<header> | |
<div class="wrapper"> | |
<h1>Vue-Resource</h1> | |
<a href="#" class="btn" @click.stop="loadUsers">Load Users</a> | |
</div> | |
</header> | |
<div class="posts"> | |
<div class="wrapper"> | |
<div v-for="user in users" class="card"> | |
<h3>{{ user.name }}</h3> | |
<p class="username">@{{ user.username }}</p> | |
</div> | |
</div> | |
</div> | |
</div> |
new Vue({ | |
el: '#vueApp', | |
data: { | |
users: [] | |
}, | |
methods: { | |
loadUsers: function() { | |
this.$http.get('http://jsonplaceholder.typicode.com/users', function(data, status, request) { | |
if (status == 200) { | |
this.users = data; | |
} | |
}); | |
} | |
} | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js"></script> |
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700); | |
body { | |
font-family: 'Open Sans', sans-serif; | |
background-color: #fafafa; | |
} | |
.wrapper { | |
width: 1000px; | |
max-width: 90%; | |
margin: 0 auto; | |
} | |
header { | |
background-color: white; | |
.wrapper { | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
} | |
h1 { | |
text-align: center; | |
font-size: 3rem; | |
font-weight: 300; | |
margin: 0; | |
padding: 10px 0; | |
} | |
.btn { | |
display: block; | |
text-decoration: none; | |
text-transform: uppercase; | |
font-weight: 700; | |
font-size: 0.9rem; | |
padding: 12px 16px; | |
background-color: #5099c9; | |
color: white; | |
border-radius: 4px; | |
&:hover { | |
background-color: #5aa7da; | |
} | |
} | |
} | |
.posts { | |
margin-top: 50px; | |
.wrapper { | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: space-between; | |
.card { | |
flex-basis: 32%; | |
margin-bottom: 2%; | |
text-align: center; | |
background-color: white; | |
padding: 20px; | |
border-radius: 4px; | |
box-sizing: border-box; | |
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14); | |
transition: all .3s ease; | |
cursor: pointer; | |
&:hover { | |
box-shadow: 0 6px 6px 0 rgba(0,0,0,.14); | |
} | |
.username { | |
font-size: 1.7rem; | |
color: #5099c9; | |
} | |
} | |
} | |
} |
Vue-Resource & JSONPlaceholder Example
A Pen by Timothy Olaleke on CodePen.