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/