分离 var app = new Vue({});到另一个 app.js

Question

我有很多 vue 用于 Resources/asset/js/app.js 中的每个“samples”.blade.php。

 var app = new Vue({});
    var app = new Vue({});
    var app = new Vue({});
    var app = new Vue({});
    var app = new Vue({});
    var app = new Vue({});
    var app = new Vue({});
    var app = new Vue({});

但是，一旦我创建了一个新的前任。 app1.js 在 Resources/asset/js 中。我的新 app1.js 里面的内容不起作用。即使我复制了这个：

require('./bootstrap');

window.Vue = require('vue');

还是不行。

我是在 laravel 中使用 vue.js 的新手。我希望有人可以向我解释如何正确使用 vue.js。我只是想把这个 var app 分开。在另一个 .js 中，例如示例 app1.js

Answer 1

您可能需要为每个应用定义不同的 id。

// frist page

// html
<div id="blog-app">
  {{ message }}
</div

// js
var blogApp = new Vue({
  el: '#blog-app', // <-this id
  data: {
    message: 'Hello Blog!'
  }
})



// second page

// html
<div id="gallery-app">
  {{ message }}
</div

// js
var galleryApp = new Vue({
  el: '#gallery-app', // <-this id
  data: {
    message: 'Hello Gallery!'
  }
})

// .. and so on

这可能有助于分离这些应用程序。

如有任何疑问，请发表评论。