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

时间:2018-09-05 15:43:58

标签: javascript laravel-5 vue.js vuejs2 vue-component

我在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({});

但是,一旦我创建了一个新的ex。 Resources / asset / js中的 app1.js 。我的新 app1.js 中的内容无效。即使我复制了此内容:

require('./bootstrap');

window.Vue = require('vue');

仍然不起作用。

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

1 个答案:

答案 0 :(得分:0)

也许您需要为每个应用定义不同的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

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

如有疑问,请发表评论。