Vue y peticiones ajax con Axios

Ejemplo de uso de vue con axios

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" id="app">
  <div class="row">
    <div class="col-sm-12">
      <select class="form-control" v-model="seccion">
        <option v-for="seccion in secciones" :value="seccion">{{ seccion }}</option>
      </select>
      <a @click="getEntradas(seccion)" class="btn btn-default">Ejecutar</a>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4" v-for="nota in notas">

      <div class="thumbnail">
        
        <div class="caption">
          <h3>{{nota}}</h3>
          <p>
            <a :href="nota.url" target="_blank" class="btn btn-primary" role="button">Ver nota</a> 
          </p>
        </div>
      </div>

    </div>
  </div>
</div>

JavaScript

// He agregado bootstrap para los estilos, 
// axios para peticiones ajax
// vue para el manejo de la app

var apiUrl = "https://randomuser.me/api/?results=2/";



new Vue({
  el: '#app',
  data: {
    notas: [], // se llenara con datos del servicio,
    secciones: ["home", "arts", "automobiles", "books", "business"],
    seccion: 'arts'
  },
  mounted: function() {
  	this.getEntradas('arts');
  },
  methods: {
  	getEntradas: function(seccion){
    	var that = this; //refe a this, en axios el contexto cambia
      //debugger;
      axios.get(url).then(function(response){
      	console.log(response);
      	that.notas = response.data.results;
      });
    }
  }

});