Edit in JSFiddle

// .vue uzantılı dosyalarımızda template tag'i ile html'i başlatıyoruz.
<template>
  <div id="app">
  
    // eğer data oluşturulmuşsa, butonu gizliyoruz.
    // butona tıklayıp, data geldikten sonra, bu buton gizlenecek.
    // Anahtar kelimeler: v-if, v-show, v-else
    <div v-if="!users.username">
      
      // butona tıklayınca, getProfile metodunu tetikliyoruz.
      // http://vuejs.org/api/#v-on
      <button @click="getProfile">Get Profile!</button>
    </div>
    
    <div class="results">
    
      // Objemize eklenen verileri gösteriyoruz.
      // Anahtar kelimeler:  v-text, v-html, v-bind
      <div><img :src="users.image_urls.bigger"></div>
      <div class="title" v-text="users.username"></div>
      
      // Eğer data oluştuysa, Update ve Reset butonlarını gösteriyoruz.
      // getProfile ve Reset metodlarını tıklanınca tetikliyoruz.
      <button v-if="users.username" @click="getProfile">Update Me!</button>
      <button v-if="users.username" @click="resetProfile">Reset</button>
    </div>
    
  </div>
</template>

// .vue uzantılı dosyalarımızda script tag'i ile JavaScript'i başlatıyoruz.
<script>
  
  // Superagent modülünü sayfamıza dahil ediyoruz.
  import request from 'superagent'

  export default {
    // users adında bir obje yaratıyoruz. 
    // servisten gelen data'yı buraya ekleyeceğiz ve kullanacağız.
    // http://vuejs.org/guide/instance.html
    data () {
      return {
        users: {}
      }
    },
    
    // metodlarımızı oluşturuyoruz
    methods: {
    
      // Superagent'ı kullanarak endpoint'e bağlantı sağlıyoruz.
      // Eğer hata varsa, err parametresini konsola basıyor.
      // Eğer başarılı bir şekilde geldiyse, sonucu objemize ekliyor.
      getProfile () {
        var self = this
        request.get('http://uifaces.com/api/v1/random').end(function (err, res) {
          if (err) {
            console.log(err)
          } else {
            self.users = res.body
          }
        })
      },
      
      // Bu metod objemizde yer alan verileri siliyor. 
      resetProfile () {
        var self = this
        self.users = {}
      }
    }
  }
</script>

// .vue uzantılı dosyalarımızda style tag'i ile Css'i başlatıyoruz.
<style>
  html {
    height: 100%;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  
  #app {
    margin-top: -100px;
    max-width: 600px;
    font-family: Helvetica, sans-serif;
    text-align: center;
  }

  button {
    background: #000;
    color: #ffffff;
    padding: 15px 20px;
    margin: 20px 0;
    font-size: 1.40em;
    border: none;
  }

  .results {
    padding: 20px 0;
  }

  img {
    border-radius: 50%;
  }
  .title {
    font-size: 2em;
    margin-top: 20px;
    text-transform: uppercase;
  }
</style>