20.vue.jsとaxiosで名前一覧を表示:index.html

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- 20.vue.jsとaxiosで名前一覧を表示:index.html [2019/02/08] – [CodeSandboxで新規Vue.jsアプリを作成] 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>
 ===== 開発環境 =====
@@ 行 70: / 行 80: @@
 これで、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>

20.vue.jsとaxiosで名前一覧を表示/index.html.1549633442.txt.gz · 最終更新: 2019/02/08 by adash333