laravel Vuejs js 适用于多页，而不适用于单页应用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41539961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vuejs js for multiple pages, not for a single page application
提问by Dinuka Thilanga
I need to build an application using laravel 5.3 and vuejs 2, because I need to use two-way binding rather than use jquery.
我需要使用 laravel 5.3 和 vuejs 2 构建一个应用程序，因为我需要使用双向绑定而不是使用 jquery。
I need to set up the views with blade templates. Then, I need to use vuejs in each page as mentioned below.
我需要使用刀片模板设置视图。然后，我需要在每个页面中使用 vuejs，如下所述。
resources/asserts/js/components/List.vue
资源/断言/js/components/List.vue
<script>
const panel = new Vue({
el: '#list-panel',
name: 'list',
data: {
message: 'Test message'
},
methods: {
setMessage: function(){
this.message = 'New message';
}
}
})
</script>
resources/asserts/views/post/index.blade.php
资源/断言/视图/post/index.blade.php
<div id="panel" class="panel panel-default">
<div class="panel-heading">Posts</div>
<div class="panel-body">
<p>{{ message }}</p>
<button v-on:click="setMessage">SET</button>
</div>
</div>
There is Add.vue to create.blade.php etc...
In Add.vue el: '#add-panel'
有 Add.vue 到 create.blade.php 等...在 Add.vue el: '#add-panel'
This is my app.js. I already commented default code like follows.
这是我的 app.js。我已经注释了如下的默认代码。
Vue.component('list', require('./components/List.vue'));
Vue.component('add', require('./components/Add.vue'));
// const app = new Vue({
// el: '#app'
// });
I hardly checked most of documentations and tutorials. But they use a single js file. They use components for small elements with template, not only js.
我几乎没有检查过大部分文档和教程。但是他们使用单个 js 文件。他们将组件用于带有模板的小元素，而不仅仅是js。
Is it possible to use vuejs this way? Do I need to use app.js. What is the best way to do this?
可以这样使用 vuejs 吗？我是否需要使用 app.js。做这个的最好方式是什么？
采纳答案by Marek Urbanowicz
- Create your 'app' for every page in seperate JS files. Good practice would be using the same name as page name to get it clear where it belongs.
- Name you main div the same as the file (fileName.php + assets/js/fileName.js).
- Use
#fileName' as yourel` - in blade use
@{{ vue expressions }}to let Blade skip this and allow VueJS handle that.
- 在单独的 JS 文件中为每个页面创建您的“应用程序”。好的做法是使用与页面名称相同的名称来明确它所属的位置。
- 将主 div 命名为与文件相同的名称 (fileName.php + assets/js/fileName.js)。
- 使用
#fileName' as yourel` - 在 Blade 使用
@{{ vue expressions }}中让 Blade 跳过这个并允许 VueJS 处理那个。
Done. Good luck!
完毕。祝你好运！
回答by Helder Lucas
If you want to sprinkle a bit of vuejs within your blade files you have basically two options:
如果你想在你的刀片文件中加入一些 vuejs，你基本上有两种选择：
Option #1
选项1
Declare global Vue components
声明全局 Vue 组件
Example
例子
// in laravel built in app.js file
Vue.component('foo', require('./components/Foo.vue'));
Vue.component('bar', require('./components/Bar.vue'));
const app = new Vue({
el: '#app'
});
create a main layout file where the root div has an id of #app
创建一个主布局文件，其中根 div 的 id 为 #app
// layout.blade.php
<html>
<header></header>
<body>
<div id="app">
@yield('content')
</div>
</body>
</html>
Finally in your views:
最后在你看来：
//some-view.blade.php
@extends('layout')
@section('content')
<foo :prop="{{ $someVarFromController }}"></foo>
@endsection
Option #2
选项#2
This is what I am currently using, and gives me more flexibility actually
这是我目前正在使用的，实际上给了我更多的灵活性
// in laravel built in app.js file
const app = new Vue({
el: '#app',
components: {
Foo: require('./components/Foo.vue'),
Bar: require('./components/Bar.vue')
}
});
In the layout file you will be using vuejs dynamic components
在布局文件中，您将使用 vuejs 动态组件
<html>
<header></header>
<body>
<div id="app">
@if (isset($component))
<component :is={{ $component }} inline-template>
@endif
@yield('content')
@if (isset($component))
</component>
@endif
</div>
</body>
</html>
In your views:
在您看来：
//some-view.blade.php
@extends('layout', ['component' => 'foo'])
@section('content')
// all the vue stuff available in blade
// don't forget to use the @ symbol every time you don't want blade to parse the expression.
// Example: @{{ some.vue.propertie }}
@endsection
And finally you can create the vue components like you always would
最后你可以像往常一样创建 vue 组件
// resources/assets/js/components/foo.vue
<script>
export default {
// the component
}
</script>
