在我们的项目中，对于Vue.js的模板，我们使用x模板在单独的Blade文件中编写组件，如下所示：
<script type="x/templates" id="nameOfComponent">
我遇到的问题是，x-template内容最近加载在其他刀片文件内容之后。
这是master.blade.php
<!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>
这是index.blade.php
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
这是app.js
window.Vue = require('vue');
window.addEventListener("load", function (event) {
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
});
如何在同一时间加载所有内容？谢谢
刀片文件用于服务器渲染，vue模板用于客户端，这就是为什么它是"较慢"；。在你的情况下，你可能想隐藏页面，直到vue完成加载。签出v-cloak指令。有关更多详细信息：https://v2.vuejs.org/v2/api/#v-斗篷