07.vue.jsでクイズアプリ:index.html

差分

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

この比較画面へのリンク

--- 07.vue.jsでクイズアプリ:index.html [2018/12/12] – [1.CodeSandboxでVue.jsアプリを作成] adash333
+++ 07.vue.jsでクイズアプリ:index.html [2018/12/13] (現在) – [3. src/App.vueの編集] adash333
@@ 行 23: / 行 23: @@
 ソースコード
+https://codesandbox.io/s/68rnrr893
 これから作るもの
 <html>
+<iframe src="https://codesandbox.io/embed/68rnrr893" 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>
@@ 行 69: / 行 67: @@
 ==== 2. index.htmlの編集 ====
-<html>
+画面左側のリストで、index.htmlを選択すると、以下のようになります。
+{{:07.vue.jsでクイズアプリ:pasted:20181213-090931.png}}
+こちらを、以下のコードに書き換えて、CSSフレームワークBulmaが利用できるようにします。（<!-- cssライブラリの読み込み -->を含んだ3行を追加します。）
+<html>
+<script src="https://gist.github.com/adash333/cb984b0dd205a15f5fea3ede2c4f05cf.js"></script>
 </html>
-参考：
+(変更後)
+{{:07.vue.jsでクイズアプリ:pasted:20181213-091113.png}}
-参考2：
-作成中
+==== 3. src/App.vueの編集 ====
+次に、画面左側のファイルリストで、srcをクリックして、ドロップダウンで出てくる、App.vueを選択すると、以下のような画面になります。
-==== 3. src/App.vueの編集 ====
+{{:07.vue.jsでクイズアプリ:pasted:20181213-091253.png}}
+こちらを、以下のコードに書き換えます。
 <html>
+<script src="https://gist.github.com/adash333/6193d1a8cfccb5387164679bcd078ee7.js"></script>
+</html>
+(変更後)
+{{:07.vue.jsでクイズアプリ:pasted:20181213-093451.png}}
+参考：https://blog.capilano-fw.com/?p=2499
-</html>
+参考2：data property in component must be a function
-参考：
+https://stackoverflow.com/questions/42396867/how-to-get-data-to-work-when-used-within-a-component-and-axios?rq=1
-参考2：
+参考3:Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key
+https://tech.moiraibusiness.com/?p=153
+https://www.tomcky.net/entry/2018/02/27/000853
 作成中
+===== 少し変更したバージョン =====
+https://codesandbox.io/s/oo199w7km5
 ===== Vue.jsでクイズアプリのリンク =====

07.vue.jsでクイズアプリ/index.html.1544659159.txt.gz · 最終更新: 2018/12/12 by adash333