Vue.jsとElement UIを使ってフロントエンドを開発しています
Vue.jsとElement UIを使っているのですがページにアクセスした際に
Vue.jsとElement UIの機能が反映されるまでに少し時間差があります
<el-tag>Hoge</el-tag>
の場合はHogeという文字が現れてからタグの装飾がされる、、ような感じです
またv-cloakを指定しても
<el-tag>Hoge</el-tag>自体が周りより遅れて描写されます
これはVue.jsが描写している時間とも言えますが他のサイトであまり見るようなことはありません
これらの原因は何でしょうか?
初心者なのでお手柔らかにお願いします
環境
Google Chrome 67.0.3396.99
Vue.js 2.5.7
npm 5.6.0
Laravel 5.6.24
CentOS 6.8
###ソースコード例
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>Hello</title> 6 <meta name="csrf-token" content="{{ csrf_token() }}"> 7 <link rel="stylesheet" href="{{ asset('css/app.css') }}"/> 8 <script type="text/javascript"> 9 window.Laravel = window.Laravel || {}; 10 window.Laravel.csrfToken = "{{csrf_token()}}"; 11 </script> 12</head> 13<body> 14<div id="app"> 15 <nav class="navbar navbar-expand-md navbar-light bg-success navbar-laravel"> 16 <div class="container"> 17 <a class="navbar-brand text-white font-weight-bold" href="{{ url('/') }}"> 18 {{ config('app.name', 'Laravel') }} 19 </a> 20 <button class="navbar-toggler" type="button" data-toggle="collapse" 21 data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 22 <span class="navbar-toggler-icon"></span> 23 </button> 24 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 25 <!-- Left Side Of Navbar --> 26 <ul class="navbar-nav mr-auto"> 27 </ul> 28 <!-- Right Side Of Navbar --> 29 <ul class="navbar-nav ml-auto"> 30 <!-- Authentication Links --> 31 @guest 32 <li><a class="nav-link text-white" href="{{ route('login') }}">{{ __('Login') }}</a></li> 33 <li><a class="nav-link text-white" href="{{ route('register') }}">{{ __('Register') }}</a></li> 34 @else 35 <li class="nav-item dropdown"> 36 <a id="navbarDropdown" class="nav-link dropdown-toggle text-white" href="#" 37 role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> 38 {{ Auth::user()->name }} <span class="caret"></span> 39 </a> 40 41 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 42 <a class="dropdown-item text-success" href="{{ route('logout') }}" 43 onclick="event.preventDefault();document.getElementById('logout-form').submit();"> 44 {{ __('Logout') }} 45 </a> 46 <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> 47 @csrf 48 </form> 49 <a class="dropdown-item text-success" href="{{ url('/user/register') }}"> 50 {{ __('詳細設定') }} 51 </a> 52 </div> 53 </li> 54 @endguest 55 </ul> 56 </div> 57 </div> 58 </nav> 59 <main class="my-5"> 60 <el-tag>HogeHoge</el-tag> 61 </main> 62</div> 63@include('common.footer') 64<script src="{{ asset('js/app.js') }}"></script> 65</body> 66</html>
app.js
1 2/** 3 * First we will load all of this project's JavaScript dependencies which 4 * includes Vue and other libraries. It is a great starting point when 5 * building robust, powerful web applications using Vue and Laravel. 6 */ 7 8require('./bootstrap'); 9 10window.Vue = require('vue'); 11import ElementUI from 'element-ui' 12import 'element-ui/lib/theme-chalk/index.css' 13import locale from 'element-ui/lib/locale/lang/ja' 14 15Vue.use(ElementUI, { locale }) 16 17/** 18 * Next, we will create a fresh Vue application instance and attach it to 19 * the page. Then, you may begin adding components to this application 20 * or customize the JavaScript scaffolding to fit your unique needs. 21 */ 22 23 24const app = new Vue({ 25 el: '#app', 26}); 27 28
jsやjQueryでも同様の現象が起こりますが
これはそもそもWEBページで読み込み後にjsで描画するのならば起こる現象なのでしょうか?
回答3件
あなたの回答
tips
プレビュー