Help us understand the problem. What is going on with this article?

Vue.jsに挑戦する ~簡単にAjaxしてみる~

More than 1 year has passed since last update.

フロントエンドフレームワークにあこがれる

ReactやAngular,Riot,Vueなんかかっこいい雰囲気するし
インターネットに聞いてみると脱JQueryなんて話も・・・・
何が出来るかわからないけどイマドキなかっこいいやつを使ってみよう!!

Vue.jsにした理由

テンプレートの書き方がHTMLライクだということで、
ちょっとはわかりやすいかも?なんて理由です。
マークダウン?なにそれ??なんでね

Vue.jsの用意

ググるとVue-cliやらWebpackやら依存ツール多そうで環境の準備だけでも大変そう・・・・
しかし、公式のドキュメントを読むと
unpkgを使えばCDNで簡単に試せるとのこと。
※unpkgは<script src="https://unpkg.com/vue"></script>でVueに限らずnpmにあるモジュールを簡単に読み込めるサービス
今回は脱JQueryも目指すのでAjaxもJQueryでなくAxiosというモジュールを使います。

まずはHTML部分から

作るのは入力されたURLとパラメータでAjaxリクエストを投げて、レスポンスをテキストエリアに吐き出すという簡単なもの。

<!DOCTYPE html>
<html>
  <head>
    <title>vue ajax</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>API CALL TEST with Vue.JS</h1>
    <div id="app">
        <div>
          <p>URL</p>
          <input type="text" id="url" v-model="url" size="60">
        </div>
        <div>
          <p>PARAM</p>
          <input type="text" id="param" v-model="param" size="60">
        </div>
        <div>
            <button v-on:click="post">POST</button>
        </div>
        <div>
            <p>RESULT</p>
            <textarea v-model="result" cols="60" rows="10"></textarea>
        </div>    
    </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 src="./main.js"> </script>
  </body>
</html>

一般的なHTMLと違うのは
v-model="url"   ←これはVueの特徴の双方向のデータバインディングをするためのもの。
v-on:click="post"  ←これはVueがイベントを取得するためのもの。
          たぶんクリックで”post”というイベントが発火という意味だと思う(間違っていたら教えてください)
「"post"というイベントの発生ではなく、"click"イベントで"post"というメソッドが実行される」です
コメントでご指摘いただきました。ありがとうございます。

次はJavaScript部分

main.js
    //Vueのインスタンスの定義
    var app = new Vue({
      el:"#app",  //vueのインスタンスが紐づくDOM要素ののセレクタ
      data:{      //ここで定義した値がv-model="hoge"や{{hoge}}の初期値に反映される
        url:"http://127.0.0.1/",//v-model="url"の初期値
        param:"{}",             //v-model="param"の初期値
        result:"...."           //v-model="result"の初期値
      },
      methods:{//v-on:click="hoge"などのイベントに紐づく関数定義
        post: function(){ //v-on:click="post"時の処理
          //Axiosを使ったAJAX
          //リクエスト時のオプションの定義
          config = {
            headers:{
              'X-Requested-With': 'XMLHttpRequest',
              'Content-Type':'application / x-www-form-urlencoded'
            },
            withCredentials:true,
          }
          //vueでバインドされた値はmethodの中ではthisで取得できる
          param = JSON.parse(this.param)

          //Ajaxリクエスト
          /*
            Axiosはプロミスベースのモジュールなので
       .thenや.catchを使う。
       .then((res => {}))の内側ではスコープが違うので
       Vueでバインドされた値をthisでは取れない
          */
          axios.post(this.url,,param,config)
          .then(function(res){
            //vueにバインドされている値を書き換えると表示に反映される
            app.result = res.data
            console.log(res)
          })
          .catch(function(res){
            //vueにバインドされている値を書き換えると表示に反映される
            app.result = res.data
            console.log(res)
          })
        }
      }
    })

こんな感じで書けます。

やってみて

すごく難しいものかと思っていたら、極簡単な実装だけなら全然ハードル高くないなと感じました。
本当はもっとたくさん機能があったり、アドオンで機能追加出来たり、すごいやつらしいのですが
はじめて試すならこのくらい簡単なところからやっていけばいいかなと思っていたりします。

次はもう少し複雑な処理も試していきます

あと、何か記述に問題、間違いあればご指摘頂けると嬉しいです。

kenta8813
大したこと書きません 自分用メモとして残していきます。 もし、誰かの役に立てば幸いです
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした