Vue.js Simple Todo
HTML
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="customAPP">
<div v-for="(item, index) in results" class="col-lg-4 col-md-4 col-sm-2">
<div class="playlist-item">
<div class="thumb-playlist">
<div class="img-in">
<a href="#"><img :src="item.snippet.thumbnails.standard.url" alt=""></a>
</div>
<a href="#" class="paly"><i class="fa fa-play-circle-o"></i>Play all</a>
<div class="video-num">250 Videos</div>
</div>
<div class="playlist-info">
<a href="#" class="title">{{item.snippet.title}}}</a>
<a class="channel-name" href="#">Rabie Elkheir<span>
<i class="fa fa-check-circle"></i></span></a>
<span class="views"><i class="fa fa-eye"></i>2.8M views </span>
<span class="date"><i class="fa fa-clock-o"></i>5 months ago </span>
</div>
</div>
</div>
</div>
JavaScript
const url = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails%2Cstatus&maxResults=5&playlistId=UUTI5S0PqpgB0DbYgcgRU6QQ&key=AIzaSyCx75gK9xHzgfnvP0X1KGSR3N0C1qlNAxk";
const vm = new Vue({
el: '#customAPP',
data: {
results: []
},
mounted() {
axios.get(url).then(response => {
this.results = response.data.items
})
}
});