Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

vue.js 1.0 その0003 vue-resourceを使ってajax通信をする

参考にさせて頂いたページ

GitHub - vuejs/vue-resource: Resource component for Vue.js

今回使用しているバージョン

vue-resource 0.7.0

ダウンロード

vue-resource.jsをダウンロードします。

サンプル

GitHubにある公式ページのドキュメントを参考に書いてみました。

<div id="app">
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<script type="text/javascript" src="/assets/js/vue-resource.js"></script>
<script type="text/javascript">
var app = new Vue({
  el : '#app',
  ready: function() {
    // GET request
    this.$http({url: '/Ajax/articletags_post_articletags_find/', method: 'GET'}).then(function (response) {
      // success callback
      console.log(response);
    }, function (response) {
      // error callback
      console.log(response);
    });
  }
});
</script>

データベースから、データを取得できました。

this.$httpのurlなど、ご自身のURLに変えてください。

参考ページから、以下の3つのドキュメントページへのリンクがあるので詳しくはそちらで。

  • Configuration
  • HTTP Requests/Response
  • Creating Resources

今回はここまで。