Vuejs js 用于多页，而不是单页应用

2022-01-25 00:00:00 laravel vue.js laravel-5.3 vue-component vuejs2

我需要使用 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 + assets/js/fileName.js).
  3. 使用 #fileName' 作为您的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.

完成.祝你好运！

相关文章