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:// | ||
これから作るもの | これから作るもの | ||
- | |||
- | |||
< | < | ||
+ | <iframe src=" | ||
</ | </ | ||
行 46: | 行 44: | ||
-https:// | -https:// | ||
+ | {{: | ||
-Vue をクリック | -Vue をクリック | ||
- | | + | {{: |
- | -src/App.vueの編集 | + | すると、以下のような画面になり、ログイン無しで、Vue.jsアプリをの開発環境が整います。 |
+ | {{: | ||
+ | |||
+ | |||
+ | 一番左側には、ファイル名が並びます。さらに下に行くと、「Add Dependency」という青いボタンが出てきて、「npmパッケージ」というものを追加することができます。 | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 真ん中は、ファイルリストで選択されているファイルの中身が表示されます。こちらのコードを編集していきます。 | ||
+ | {{: | ||
+ | |||
+ | 一番右側は、プレビュー画面です。真ん中のファイルを選択すると、プレビュー画面が自動で更新されます。Ctrl+Sで保存もできます。 | ||
+ | {{:07.vue.jsでクイズアプリ: | ||
+ | |||
+ | なお、あらかじめGitHubアカウントを作成しておき、画面右上の、「Sign in with GitHub」をクリックしてログインすると、Ctrl+Sで作成したアプリを保存(無料)することもできます。 | ||
+ | |||
+ | |||
+ | |||
+ | ==== 2. index.htmlの編集 | ||
+ | 画面左側のリストで、index.htmlを選択すると、以下のようになります。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | こちらを、以下のコードに書き換えて、CSSフレームワークBulmaが利用できるようにします。(< | ||
< | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | (変更後) | ||
+ | {{: | ||
+ | ==== 3. src/ | ||
+ | 次に、画面左側のファイルリストで、srcをクリックして、ドロップダウンで出てくる、App.vueを選択すると、以下のような画面になります。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | こちらを、以下のコードに書き換えます。 | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
</ | </ | ||
- | 参考: | + | (変更後) |
+ | {{: | ||
- | 参考2: | + | 参考:https:// |
+ | 参考2:data property in component must be a function | ||
+ | |||
+ | https:// | ||
+ | |||
+ | 参考3: | ||
+ | |||
+ | https:// | ||
+ | |||
+ | https:// | ||
作成中 | 作成中 | ||
+ | |||
+ | ===== 少し変更したバージョン ===== | ||
+ | |||
+ | https:// | ||
+ | |||
===== Vue.jsでクイズアプリのリンク ===== | ===== Vue.jsでクイズアプリのリンク ===== | ||
07.vue.jsでクイズアプリ/index.html.1544657559.txt.gz · 最終更新: 2018/12/12 by adash333