内容へ移動
サルでもわかるWEBプログラミング
フリーソフトのみでホームページ作成
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
index.html
»
20.vue.jsとaxiosで名前一覧を表示
トレース:
20.vue.jsとaxiosで名前一覧を表示:index.html
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 20.Vue.jsとaxiosで名前一覧を表示 ====== Vue.jsでWeb APIを利用するときは、axiosを利用するのがよいそうです。 axiosに慣れるために、以下のサイトを写経してみたいと思います。 https://sourceacademy.work/#/vuejs/vueUseAxios ===== すること ===== -ランダムに名前の一覧を返してくれるhttps://randomuser.meを利用して、名前一覧を表示する 今回は、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> ===== 開発環境 ===== <code> パソコン Chrome(くろーむ、WEBブラウザの一つ) GitHubアカウント作成済み(無料) </code> パソコンは、Windowsパソコンでも、Macでも、かまいませんが、私の場合はWindows 10 Proとなります。 今回利用するもの <code> CodeSandbox Vue 2.5.2 Vuetify 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 2018年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 2018年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アプリの実例 2017/06/13 Olayinka Omole ===== リンク ===== 目次: 前: 次:
20.vue.jsとaxiosで名前一覧を表示/index.html.txt
· 最終更新: 2019/02/08 by
adash333
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ