--- title: Vue.jsに挑戦する ~簡単にAjaxしてみる~ tags: Vue.js JavaScript Ajax author: kenta8813 slide: false --- #フロントエンドフレームワークにあこがれる ReactやAngular,Riot,Vueなんかかっこいい雰囲気するし インターネットに聞いてみると脱JQueryなんて話も・・・・ 何が出来るかわからないけどイマドキなかっこいいやつを使ってみよう!! #Vue.jsにした理由 テンプレートの書き方がHTMLライクだということで、 ちょっとはわかりやすいかも?なんて理由です。 マークダウン?なにそれ??なんでね #Vue.jsの用意 ググるとVue-cliやらWebpackやら依存ツール多そうで環境の準備だけでも大変そう・・・・ しかし、公式のドキュメントを読むと unpkgを使えばCDNで簡単に試せるとのこと。 ※unpkgは``````でVueに限らずnpmにあるモジュールを簡単に読み込めるサービス 今回は脱JQueryも目指すのでAjaxもJQueryでなくAxiosというモジュールを使います。 #まずはHTML部分から 作るのは入力されたURLとパラメータでAjaxリクエストを投げて、レスポンスをテキストエリアに吐き出すという簡単なもの。 ```html vue ajax

API CALL TEST with Vue.JS

URL

PARAM

RESULT

``` 一般的な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) }) } } }) ``` こんな感じで書けます。 #やってみて すごく難しいものかと思っていたら、極簡単な実装だけなら全然ハードル高くないなと感じました。 本当はもっとたくさん機能があったり、アドオンで機能追加出来たり、すごいやつらしいのですが はじめて試すならこのくらい簡単なところからやっていけばいいかなと思っていたりします。 次はもう少し複雑な処理も試していきます あと、何か記述に問題、間違いあればご指摘頂けると嬉しいです。