laravel 5 vue设置不清楚
laravel 5 vue设置不清楚
提问于 2017-07-03 09:17:46
我已经试过了所有的东西，但是我不能让vue.js在Laravel上工作，似乎没有任何具体的东西可以把x放在文件y中来让它工作。
我用npm，作曲家，什么都试过了，但是我连一个基本的例子都找不到。我不清楚我需要什么，它需要去哪里。
我使用刀片从app.layout视图扩展，但不清楚我是否需要在默认的应用程序布局中添加代码到资产/js/app.js，还是只使用脚本src=“标签”。
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
} ,
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})app.layout.blade.php
<script src="{{asset('/js/app.js')}}"/></script>
..some more html
<body id="app">
<div id="app-5">
<p>@{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
</body>
..more htmlStack Overflow用户
回答已采纳
发布于 2017-07-03 09:47:19
你为什么定义两个Vue const？
不需要使用js代码的这一部分：
const app = new Vue({
el: '#app'
});删除该行并测试它：
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
} ,
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})但请记住，你的工作应该是：
<div id="app-5"> vuejs codes should be run here </div>不要忘记运行npm run watch或npm run dev来编译
如果您有错误和问题，这种方式，您可以跳到第二条路。
第二条路：
在vue-script.js目录中创建public/js/文件
vue-script.js：
var app5 = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
} ,
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})在sample.blade.php目录中创建resources/views/文件
sample.blade.php：
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
</head>
<body>
<div id="app">
@{{ message }}
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="{{ asset('js/vue-script.js') }}"></script>
</body>
</html>然后在routes/web.php
Route::get('testvue', function() {
return view('sample');
});然后转到浏览器中的url：/testvue
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44881883
复制相关文章
相似问题
腾讯云开发者
