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 | ||
---|---|---|---|
行 11: | 行 11: | ||
今回は、https:// | 今回は、https:// | ||
+ | |||
+ | ソースコード | ||
+ | https:// | ||
+ | |||
+ | DEMO | ||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
+ | |||
+ | |||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 59: | 行 69: | ||
以上で、Vue.jsで、Vuetifyを利用する準備ができました。 | 以上で、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に関するリンク ===== | ===== Vue.jsとaxiosに関するリンク ===== |
20.vue.jsとaxiosで名前一覧を表示/index.html.1549631854.txt.gz · 最終更新: 2019/02/08 by adash333