差分

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

--- 07.vue.jsでクイズアプリ:index.html [2018/12/11] – [07.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>
@@ 行 40: / 行 38: @@
 Chrome（くろーむ、WEBブラウザの一つ）\\
 オンラインエディタであるCodeSandboxを利用するために、[[https://www.google.co.jp/chrome/|Chrome]]というWEBブラウザをインストールして、そのソフトでWEBページをご覧になってください。[[https://www.google.co.jp/chrome/|こちらのページ]]からインストールできます。
+また、GitHubアカウントを作成（無料）していると、CodeSandboxで作成したアプリを保存できます。
+==== 1.CodeSandboxでVue.jsアプリを作成 ====
+  -https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック
+{{:07.vue.jsでクイズアプリ:pasted:20181213-083656.png}}
+  -Vue　をクリック
+{{:07.vue.jsでクイズアプリ:pasted:20181213-083907.png}}
+すると、以下のような画面になり、ログイン無しで、Vue.jsアプリをの開発環境が整います。
+{{:07.vue.jsでクイズアプリ:pasted:20181213-084052.png}}
+一番左側には、ファイル名が並びます。さらに下に行くと、「Add Dependency」という青いボタンが出てきて、「npmパッケージ」というものを追加することができます。
+{{:07.vue.jsでクイズアプリ:pasted:20181213-085122.png}}
+{{:07.vue.jsでクイズアプリ:pasted:20181213-085202.png}}
+真ん中は、ファイルリストで選択されているファイルの中身が表示されます。こちらのコードを編集していきます。
+{{:07.vue.jsでクイズアプリ:pasted:20181213-085456.png}}
+一番右側は、プレビュー画面です。真ん中のファイルを選択すると、プレビュー画面が自動で更新されます。Ctrl+Sで保存もできます。
+{{:07.vue.jsでクイズアプリ:pasted:20181213-085833.png}}
+なお、あらかじめGitHubアカウントを作成しておき、画面右上の、「Sign in with GitHub」をクリックしてログインすると、Ctrl+Sで作成したアプリを保存（無料）することもできます。
+==== 2. index.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}}
+==== 3. src/App.vueの編集 ====
+次に、画面左側のファイルリストで、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
+参考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
+参考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でクイズアプリのリンク =====