差分

このページの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://sourceacademy.work/#/vuejs/vueUseAxiosを写経してみたいと思います。
+ソースコード
+https://codesandbox.io/s/x73xqx9p1o
+DEMO
+<html>
+<iframe src="https://codesandbox.io/embed/x73xqx9p1o" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+</html>
 ===== 開発環境 =====
@@ 行 28: / 行 38: @@
 firebase
 </code>
+===== CodeSandboxで新規Vue.jsアプリを作成 =====
+最初に、CodeSandbox上で、新規Vue.jsアプリを作成し、CSSフレームワークVuetifyが利用できるように設定します。
+  -https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック
+  -Vue　をクリック
+  -Add Dependencyから、Vuetifyをインストール
+  -index.htmlの編集
+  -src/main.jsの編集
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123704.png}}
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123723.png}}
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123749.png}}
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123804.png}}
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-123835.png}}
+index.htmlと、src/main.jsは、以下をコピペします。
+<html>
+<script src="https://gist.github.com/adash333/a61cf750e6c8410bc53f65a43ca8c84c.js"></script>
+</html>
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124228.png}}
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124252.png}}
+以上で、Vue.jsで、Vuetifyを利用する準備ができました。
+===== Vuetifyのテンプレートを適用 =====
+src/App.vueに、以下のコードをコピペします。
+<html>
+<script src="https://gist.github.com/adash333/0595b0b3b03b8427dcbf7d845414174c.js"></script>
+</html>
+{{:14.vue.jsのvuexで入力フォーム:pasted:20190121-124906.png}}
+これで、App.vueの土台が出来上がりました。
+===== Vue.jsにaxiosをインストールしてWeb APIの情報を取得してリスト表示 =====
+  -Add Dependencyから、axiosをインストール
+  -App.vueにaxiosをインポート
+  -axiosを用いてAPI通信
+  -APIで取得した値を画面に表示
+{{:20.vue.jsとaxiosで名前一覧を表示:pasted:20190208-135153.png}}
+<html>
+<script src="https://gist.github.com/adash333/d8aa90f58cc3c532d7c8f3ff2c3392c1.js"></script>
+</html>
+App.vue
+(変更前)
+{{:20.vue.jsとaxiosで名前一覧を表示:pasted:20190208-141432.png}}
+(変更後)
+{{:20.vue.jsとaxiosで名前一覧を表示:pasted:20190208-142953.png}}
+今回は以上となります。
+===== ソースコード =====
+ソースコード
+https://codesandbox.io/s/x73xqx9p1o
+DEMO
+<html>
+<iframe src="https://codesandbox.io/embed/x73xqx9p1o" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+</html>
+===== Vue.jsとaxiosに関するリンク =====
+https://qiita.com/FrozenVoice/items/cbfa6d3f611a87b57cf4
+@FrozenVoice
+年07月30日に更新
+Vue.jsからaxiosで適当なjsonデータを取得して表示する
+https://www.webopixel.net/javascript/1471.html
+CDN版Vue.js + axios でさくっとAjaxしてみる
+Posted: 2018.12.14
+https://simple-it-life.com/2017/12/11/vuejs/
+Published 2017年12月11日 by tomsato
+Vue.jsのサンプルを見ながら理解を深めていく ~ 入門の次のサンプルを見たい人用 ~
+https://qiita.com/s-kaoruko/items/2441e016cea947d190e6
+@s-kaoruko
+年12月15日に投稿
+diffeasy Advent Calendar 201815日目
+Vue(Vuex, axios) + ExpressでRESTful APIに超入門する
+https://www.webprofessional.jp/fetching-data-third-party-api-vue-axios/
+Vue.jsとAxiosなら驚くほど簡単に作れる！外部APIを使ったWebアプリの実例
+/06/13 Olayinka Omole