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

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)
          })
        }
      }
    })

こんな感じで書けます。

やってみて

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

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

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

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