javascript - Komma igång med vue-resource

Försöker hitta några färdiga exempel på användning av vue-resource-pluginet för vue.js, jag försökte detta:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>

<div id="my_view">
  <p>{{ origin }}</p>
</div>

<script>
var Vue = require('vue');
Vue.use(require('vue-resource'));

new Vue({
    el: '#my_view',
    data: {
       origin: ''
    },

    ready: function() {

        // GET request
        this.$http.get('http://httpbin.org/ip', function (data, status, request) {

            // set data on vm
            this.$set('origin', data)

        }).error(function (data, status, request) {
            // handle error
        })
      }
})
</script>

att bara fråga httpbin.org/ip (en slumpmässig REST-endpoint jag kunde hitta) och visa resultatet inuti #myview > p. Det är bara exemplet (en anpassad version) som ges på vue-resource github-sidan som jag försöker köra.

Kan någon se vad jag inte får rätt för att uppnå detta?

Redigera: la till ett komma, och här är fiddle:n av det.

Svar #1

Det är för att du använder require. Om du använder require behöver du något bibliotek som http://browserify.org/

Detta exempel fungerar nu: http://jsfiddle.net/dccbbkam/2/

Och här är ett annat exempel för dig: http://jsfiddle.net/dccbbkam/4/