网站搜索

javascript - 入门 vue-resource


努力寻找任何关于 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 页面上提供的示例(一个改编版本)。

有人能看出我在实现这一点时哪里做得不对吗?

编辑:添加了逗号,这是它的 fiddle。

答案#1

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

此示例现在可以运行: http://jsfiddle.net/dccbbkam/2/

这里还有另一个例子给你:http://jsfiddle.net/dccbbkam/4/