
じろう
2019年11月02日に参加
学習履歴詳細
[Vue.js]Vue.jsのツボとコツが分かる本 4章〜5-3まで jsonとjsonpファイルを読み込んで処理する [就活]wantedlyのプロフィール文をレビューに基づいて修正
やったこと
■Vue.jsのツボとコツが分かる本4章
Ajaxで商品データを外部ファイルから読み込む
まずJavaScriptでAjaxを使ってみる
次にjQueryでAjax
最後にVue.jsでAjax
■Vue.jsのツボとコツが分かる本5章
自動見積りフォームの作成。オプションにチェックが入ったり、写真の枚数が変わったりと、ユーザーの操作に応じてリアルタイムで見積もり金額が変化、表示されるようなもの
まずはJavaScriptで実装
そのあとVue.jsで実装(途中まで)
■就活
wantedlyのプロフィールをキャリアアドバイザーのレビューを元に修正。
わかったこと
responseにjsonのデータが入ってる。responseを変数に格納してその配列を加工、描画に反映する
jQueryだと$.ajax
という便利なメソッドが使える。メソッドチェーンした.done
には通信成功時に実行したい処理を、.fail
には失敗時にしたい処理を書く
jsonpを使うことでクロスドメイン制約を回避することができる→Chromeでも表示できる
VSCodeのライブサーバーを使うことでサーバーに置いたJSONPファイルを読み込むというコードで動かすことができた
自動見積りフォームでは、Vue.jsに置き換える際、dataとしてもたせる値と算出プロパティとして用意するものを設計段階で分けることが重要
次やること
自動見積りフォームの完成
jsonpと$.ajax
について調べる
Rails
Vue.js
2020年06月08日(月)
5.4時間