MetaPii 技術室

あなたの知恵と思いを検索するフラッシュメモアプリMetaPiiのエンジニアブログです。

Vue.jsのAjax(axios)をサクっと試すサンプル

概要

jQueryやってたけどフロントも少しはできるけどVueのajaxってどうすんだっけ。
Webpack ?やらなんかnpmやら、コンポーネントファイルやら準備がいるんでしょ？
そんなことを思っている人のためにさくっと試せて改良できるコードを載せます。

ここで言うさくっとは、インストール不要！・1ファイルで完結します！

とりあえずGet

ほいっ、これだけ。
・vue_sample.html

<!DOCTYPE html>
<html>
  <head>
    <title>vue ajax</title>
  </head>
  <body>
    <div id="app">
        {{ info }}
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/jquery"></script>  
  
    <script type="text/javascript"> 
      var app = new Vue({
        el: '#app',
        data () {
          return { info: null }
        },
        mounted () {
          axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
            .then(response => (this.info = response))
        }
      })
    </script>

  </body>
</html>

このコードをhtmlファイルで保存して、ダブルクリックでブラウザで開くだけ。
動作としては、

1 . 画面が読み込まれると同時にgetが発動
2 . infoに結果を挿入

サンプル頁

vue ajax

ボタン押したらGet

はい、次。
・ vue_sample2.html

<!DOCTYPE html>
<html>
  <head>
    <title>vue ajax</title>
  </head>
  <body>
    <div id="app">
        <button v-on:click="get">Get</button><br> <!-- この行追加したよ -->
        {{ info }}
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/jquery"></script>  
  
    <script type="text/javascript"> 
      var app = new Vue({
        el: '#app',
        data () {
          return { info: null }
        },
        methods:{ //この修正したよ。v-on:click="xxxx"のイベントに紐づく関数 
          get: function(){ //この修正したよ。v-on:click="get"時の処理
              axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
                  .then(response => (this.info = response))
          } 
        } 
      })
    </script>

  </body>
</html>

サンプル頁

vue ajax

POSTどうすんの？

先人たちに託す

qiita.com

余談

私も最初はGoogleで検索して上記記事を参考にサクッとためしたかったんですが、なんかうまくいかなかった。 かつ、動くサンプルがないのでイメージしにくかった。
やっぱ1ファイルでコピペしたら動くし、動作がみれるものがいい感じのサンプルだと私は思っています。
そんなサンプルを用意したかったという思いが背景です。