javascript - 开始使用 vue-resource

标签 javascript javascript-framework vue.js

努力寻找 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 page 上提供的示例(改编版本)我正在尝试运行。

谁能看出我在实现这一目标方面做得不对?

编辑:添加逗号和 here是它的 fiddle 。

最佳答案

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

这个例子现在可以工作了: http://jsfiddle.net/dccbbkam/2/

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

关于javascript - 开始使用 vue-resource,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32082488/

相关文章:

javascript - 用于桌面应用程序的最佳 JavaScript 框架

javascript - 如何将iframe的内容复制到弹出窗口中?

vue.js - workbox.core.skipWaiting 不是函数(但 workbox.skipWaiting 是)

JavaScript this.todoList.filter 不是函数

javascript - 将数字范围拆分为特定数量的间隔

javascript - 如何调用另一个文件中名为 "toggleDrawer"且未导出的函数?

Javascript:除了 "use strict"之外,还有哪些 "use"指令?

javascript - 带有查询字符串的 RequireJS 数据主体不起作用

javascript - 同时运行多个 Jquery 操作

javascript - 如何将每个用户路由/链接到他们自己的数据?