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