20.vue.jsとaxiosで名前一覧を表示:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
20.vue.jsとaxiosで名前一覧を表示:index.html [2019/02/08] – [すること] adash333 | 20.vue.jsとaxiosで名前一覧を表示:index.html [2019/02/08] (現在) – [Vue.jsにaxiosをインストールしてWeb APIの情報を取得してリスト表示] adash333 | ||
---|---|---|---|
行 12: | 行 12: | ||
今回は、https:// | 今回は、https:// | ||
- | ====== 開発環境 | + | ソースコード |
+ | https:// | ||
+ | |||
+ | DEMO | ||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== 開発環境 ===== | ||
< | < | ||
パソコン | パソコン | ||
行 28: | 行 38: | ||
firebase | firebase | ||
</ | </ | ||
+ | |||
+ | ===== CodeSandboxで新規Vue.jsアプリを作成 ===== | ||
+ | 最初に、CodeSandbox上で、新規Vue.jsアプリを作成し、CSSフレームワークVuetifyが利用できるように設定します。 | ||
+ | |||
+ | -https:// | ||
+ | -Vue をクリック | ||
+ | -Add Dependencyから、Vuetifyをインストール | ||
+ | -index.htmlの編集 | ||
+ | -src/ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | index.htmlと、src/ | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 以上で、Vue.jsで、Vuetifyを利用する準備ができました。 | ||
+ | |||
+ | ===== Vuetifyのテンプレートを適用 ===== | ||
+ | src/ | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | これで、App.vueの土台が出来上がりました。 | ||
+ | |||
+ | ===== Vue.jsにaxiosをインストールしてWeb APIの情報を取得してリスト表示 ===== | ||
+ | -Add Dependencyから、axiosをインストール | ||
+ | -App.vueにaxiosをインポート | ||
+ | -axiosを用いてAPI通信 | ||
+ | -APIで取得した値を画面に表示 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | App.vue | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | 今回は以上となります。 | ||
+ | |||
+ | ===== ソースコード ===== | ||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | DEMO | ||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Vue.jsとaxiosに関するリンク ===== | ||
+ | |||
+ | https:// | ||
+ | @FrozenVoice | ||
+ | 2018年07月30日に更新 | ||
+ | Vue.jsからaxiosで適当なjsonデータを取得して表示する | ||
+ | |||
+ | https:// | ||
+ | CDN版Vue.js + axios でさくっとAjaxしてみる | ||
+ | Posted: 2018.12.14 | ||
+ | |||
+ | https:// | ||
+ | Published 2017年12月11日 by tomsato | ||
+ | Vue.jsのサンプルを見ながら理解を深めていく ~ 入門の次のサンプルを見たい人用 ~ | ||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | @s-kaoruko | ||
+ | 2018年12月15日に投稿 | ||
+ | diffeasy Advent Calendar 201815日目 | ||
+ | Vue(Vuex, axios) + ExpressでRESTful APIに超入門する | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | Vue.jsとAxiosなら驚くほど簡単に作れる!外部APIを使ったWebアプリの実例 | ||
+ | 2017/06/13 Olayinka Omole | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
20.vue.jsとaxiosで名前一覧を表示/index.html.1549626064.txt.gz · 最終更新: 2019/02/08 by adash333