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://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>

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