vue.js sample3

<ul id="app">
  <li v-for="(item,index) in items">
      <img v-bind:src="item.snippet.thumbnails.high.url">
      <span class="title">{{ item.snippet.title }}</span>
  </li>
</ul>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('https://www.googleapis.com/youtube/v3/playlistItems',{
 	params: {
 		part: 'snippet',
 		playlistId: 'PL55713C70BA91BD6E',/*プレイリストのID*/
 		maxResults: 6, /*表示する件数*/
  	key: 'APIキー' /*Youtube Data API で使う認証キー*/ 
 	}
 }).then((response) => {
    Init(response.data.items);
}).catch( error => { console.log(error); });

function Init(data){
 new Vue({
  el: '#app',
  data: {
    items:[]
  },
  created: function(){
      for(var i = 0; i < data.length; i++){
         this.items.push(data[i]);
      }
  },
 });
}
</script>