vue-resource入门

Question

为了找到vue.js的vue-resource插件的任何预先使用的示例而苦苦挣扎,我尝试了这个:

<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>

只是查询httpbin.org/ip(我能找到的随机REST端点)并在里面显示结果#myview > p.这只是我正在尝试运行的vue-resource github页面上提供的示例(一个改编版本).

任何人都可以看到我无法实现这一目标吗？

编辑:添加逗号,这里是它的小提琴.

Answer 1

因为你正在使用它require.如果你使用,require你需要一些像http://browserify.org/这样的lib

这个例子现在正在运行:http: //jsfiddle.net/dccbbkam/2/

这是另一个例子:http: //jsfiddle.net/dccbbkam/4/