Javascript laravel刀片内部的vue.js模板_Javascript_Laravel_Vue.js_Frontend_Laravel Blade

Javascript laravel刀片内部的vue.js模板

javascript laravel vue.js

Javascript laravel刀片内部的vue.js模板,javascript,laravel,vue.js,frontend,laravel-blade,Javascript,Laravel,Vue.js,Frontend,Laravel Blade,在我们的项目中，对于Vue.js的模板，我们使用x模板在单独的刀片文件中编写组件，如下所示： <script type="x/templates" id="nameOfComponent"> 如何在同一时间加载所有内容？谢谢。刀片文件用于服务器渲染，而vue模板用于客户端渲染，这就是为什么它“较慢”的原因。在您的情况下，您可能希望在vue完成加载之前隐藏页面。签出v-clope指令。有关更多详细信息：谢谢，我将检查链接并尝试您的解决方案。我

在我们的项目中，对于Vue.js的模板，我们使用x模板在单独的刀片文件中编写组件，如下所示：

<script type="x/templates" id="nameOfComponent">

如何在同一时间加载所有内容？

谢谢。

刀片文件用于服务器渲染，而vue模板用于客户端渲染，这就是为什么它“较慢”的原因。在您的情况下，您可能希望在vue完成加载之前隐藏页面。签出

v-clope

指令。有关更多详细信息：

谢谢，我将检查链接并尝试您的解决方案。我尝试了此解决方案，我的问题已得到解决，但这会使所有页面加载缓慢。为什么Vue实例需要这段时间来准备？我们能让它更快吗？不仅仅是vue实例，还有vue附带的所有LIB。我知道一些工具，如wepack或gulp，可以最小化js文件并帮助web更快地构建/运行。我们已经在我们的项目中使用了wepack，我们可以在运行生产之前最小化js文件。谢谢你的帮助

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>@yield('title', 'base')</title>

    </head>
    <body>
        <div id="app">
            @yield('content')
        </div>
              
        <script src="{{ asset('js/app.js') }}"></script>

        @stack('scripts')
        @yield('script')

    </body>
</html>

test home page

<my-checkbox></my-checkbox>

@push('scripts')
    <script type="text/x-template" id="checkbox-template">
        <div class="checkbox-wrapper" @click="check">
        <div :class="{ checkbox: true, checked: checked }"></div>
        <h1>checkbox</h1>
        <div class="title">@{{ title }}</div>
        </div>
    </script>

    <script>
        Vue.component('my-checkbox', {
            template: '#checkbox-template',
            data() {
                return { checked: false, title: 'Check me' }
            },
            methods: {
                check() { this.checked = !this.checked; }
            }
        });
    </script>
@endpush

window.Vue = require('vue');



window.addEventListener("load", function (event) {
    Vue.component('example-component', require('./components/ExampleComponent.vue').default);
    
    const app = new Vue({
        el: '#app',
    });
});