サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


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


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
20.vue.jsとaxiosで名前一覧を表示:index.html [2019/02/08] – [CodeSandboxで新規Vue.jsアプリを作成] adash33320.vue.jsとaxiosで名前一覧を表示:index.html [2019/02/08] (現在) – [Vue.jsにaxiosをインストールしてWeb APIの情報を取得してリスト表示] adash333
行 11: 行 11:
  
 今回は、https://sourceacademy.work/#/vuejs/vueUseAxiosを写経してみたいと思います。 今回は、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の土台が出来上がりました。 これで、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

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki