Vuejs js适用于多个页面，而不适用于单个页面应用程序 [英] Vuejs js for multiple pages, not for a single page application

问题描述

我需要使用laravel 5.3和vuejs 2来构建应用程序，因为我需要使用双向绑定而不是使用jquery.

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.

我需要使用刀片模板设置视图.然后，我需要在每个页面中使用vuejs，如下所述.

I need to set up the views with blade templates. Then, I need to use vuejs in each page as mentioned below.

resources/asserts/js/components/List.vue

resources/asserts/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

resources/asserts/views/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>

有Add.vue到create.blade.php等... 在Add.vue el: '#add-panel'

There is Add.vue to create.blade.php etc... In Add.vue el: '#add-panel'

这是我的app.js.我已经评论了如下的默认代码.

This is my app.js. I already commented default code like follows.

Vue.component('list', require('./components/List.vue'));
Vue.component('add', require('./components/Add.vue'));

// const app = new Vue({
//     el: '#app'
// });

我几乎不检查大多数文档和教程.但是他们使用单个js文件.他们使用带有模板的小元素组件，而不仅仅是js.

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.

是否可以通过这种方式使用vuejs?我需要使用app.js吗?最好的方法是什么?

Is it possible to use vuejs this way? Do I need to use app.js. What is the best way to do this?

推荐答案

1. 为单独的JS文件中的每个页面创建应用".优良作法是使用与页面名称相同的名称，以弄清楚页面所属位置.
2. 将您的主要div命名为与文件相同的名称(fileName.php + asset/js/fileName.js).
3. 使用#fileName' as your el`
4. 在Blade中使用@{{ vue expressions }}让Blade跳过它并允许VueJS处理.

1. 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.
2. Name you main div the same as the file (fileName.php + assets/js/fileName.js).
3. Use #fileName' as yourel`
4. in blade use @{{ vue expressions }} to let Blade skip this and allow VueJS handle that.

完成.祝你好运！

这篇关于Vuejs js适用于多个页面，而不适用于单个页面应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！