Question

我现在已经尝试了所有的东西，但是我无法让vue.js在Laravel上工作，似乎没有任何具体的东西可以将x放在文件y中以使其正常工作。

我用npm，作曲家尝试了一切，但我甚至无法得到一个基本的例子。我不清楚我需要什么，需要去哪里。

我正在使用刀片从app.layout视图扩展但是我不清楚我需要将代码添加到assets / 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 html

Answer 1

为什么要定义两个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('')
    }
   }
 })

但是要记住你的vuejs工作应该是beetween：

<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');
});

并在浏览器中转到网址：/testvue

laravel 5 vue设置不清楚

1 个答案: