質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1580閲覧

ローディングを表示させたい

taiyo2017

総合スコア170

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/12/20 05:18

ローディングを表示させたいです。
index.htmlに

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <transition name="view"> <router-view /> </transition> <LoadingOverlay /> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> <script src="./main.js"></script> </body> </html>

と書き、
main.jsに

export default{ beforeRouteEnter(to,from,next){ setTimeout(next,1000) } }


書き、
main.cssに

.loading-enter-active{ transition:all 0.25s; } .loading-leave-active{ transition:all 0.5s ease 0.5s; }

と書きました。
これらのコードを実行すると、
main.js:1 Uncaught SyntaxError: Unexpected token export とエラーが出ました。何が問題でしょうか?どう直せばいいのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2018/12/20 05:33

環境をご提示ください。特にブラウザのバージョンを。
guest

回答1

0

●Vue.jsの習得が目的でローディング画面を表示する事が目的で無いならスルーして下さい。

Vue.jsは使用して無いので他の方に回答をパスします。
フレームワークを使わなくても下記のjsとcssの組み合わせでローディング画面の実装が出来ます。
フェードアウト不要な場合はjsのみで出来ます。

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"/> 5 <style type="text/css"> 6 /*ローディング画面が分かりやすくする為のスタイルここから*/ 7 body{background-color: rgb(50, 15, 5)} 8 #loading{ 9 background-color: rgb(232, 74, 87); 10 color: rgb(250, 250, 250); 11 margin: 0 0 0 -100px; 12 text-align: center; 13 width: 200px; 14 border-radius: 30px; 15 position: fixed; 16 left: 50%; 17 top: 50%; 18 z-index: 114514; 19 } 20 /*ここまで*/ 21 /*フェードアウト不要ならここから*/ 22 .fadeout{animation: fo 2s linear 0s 1;} 23 @keyframes fo{0%{opacity: 1;}100%{opacity: 0;}} 24 /*ここまで削除*/ 25 </style> 26 </head> 27 <body> 28 <div id="loading"><a id = "loadstr">なうろーでぃんぐ!</a></div> 29 </body> 30 <script type="text/javascript"> 31 var loadfun = function(){ 32 var selem = document.getElementById("loadstr"); 33 var elem = document.getElementById("loading"); 34 if(document.readyState === "complete"){ 35 selem.innerText = "☆こんぷりーとなのです☆"; 36 clearInterval(si); 37 elem.classList.add("fadeout");//フェードアウト不要なら削除 38 setTimeout(function(){elem.style.display = "none"; }, 2000) 39 } 40 } 41 var si = setInterval(loadfun,200); 42 </script> 43</html>

目的がどちらか分かりませんがファイトなのです|ー゚)

投稿2018/12/20 08:16

編集2018/12/20 08:46
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問