Vue.js example

by Atinux

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-resource/dist/vue-resource.min.js"></script>

<div id="app">
  <h1>Photos</h1>
  <photos></photos>
  <h1>Comments</h1>
  <comments></comments>
</div>

CSS

.photos {
  clear: left;
  overflow: hidden;
  padding-left: 0;
}
.photos li {
  list-style-type: none;
  float: left;
}
.comments {
  padding-left: 0;
}
.comments li {
  list-style-type: none;
  border: 1px #ddd solid;
  background: white;
  padding: 10px;
}

JavaScript

Vue.component('photos', {
	template: `<ul class="photos">
  	<li v-if="loading">Loading photos...</li>
  	<li v-else v-for="photo in photos"><img :src="photo.thumbnailUrl" /></li>
  </ul>`,
	data: function () {
  	return {
    	photos: [],
      loading: true
    };
  },
  mounted: function () {
  	var vm = this;
  	this.$http.get('https://jsonplaceholder.typicode.com/photos')
    .then(function (res) {
    	vm.photos = res.body.slice(0, 9);
      vm.loading = false;
    })
  }
})

Vue.component('comments', {
	template: `<ul class="comments">
  	<li v-if="loading">Loading comments...</li>
  	<li v-else v-for="comment in comments">{{ comment.name }}</li>
  </ul>`,
	data: function () {
  	return {
    	comments: [],
      loading: true
    };
  },
  mounted: function () {
  	var vm = this;
  	this.$http.get('https://jsonplaceholder.typicode.com/comments')
    .then(function (res) {
    	vm.comments = res.body.slice(0, 10);
      vm.loading = false;
    })
  }
})

new Vue({
	el: '#app'
})