laravel 5 vue设置不清楚

本文介绍了laravel 5 vue设置不清楚的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我现在已经尝试了所有方法，但是我无法让vue.js在Laravel上运行，似乎没有什么具体说明可以将x放入y文件中.

I've tried about everything now but I can't get vue.js to work on Laravel, there doesn't seem to be anything concrete around that says put x in file y to get it working.

我已经尝试使用npm，作曲家进行所有操作，但是我什至无法获得一个基本的示例来工作.我不清楚我需要什么，需要去哪里.

I've tried about everything with npm, composer but i can't even get a basic example to work. It's very unclear to me what I need and where it needs to go.

我正在使用刀刃从app.layout视图扩展，但是不清楚是否需要将代码添加到asset/js/app.js或仅在默认应用布局中使用脚本src ="标签.

I am using blade to extend from an app.layout view but it's unclear wether i need to add code to assets/js/app.js or just use script src="" tags in my default app layout.

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

推荐答案

为什么要定义两个Vue常量?

why you define two Vue const?

不需要这部分js代码:

this part of js code is no needed:

const app = new Vue({
   el: '#app'
});

删除该行并对其进行测试:

remove that line and test it :

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工作应介于以下两者之间:

but remmember your vuejs work should be beetween:

<div id="app-5"> vuejs codes should be run here </div>

不要忘记运行npm run watch或npm run dev进行编译

Don't forget running npm run watch or npm run dev to compile

如果您在使用此方法时遇到错误和问题，可以跳到第二种方法

if you have error and problem with this way you can skip to second way

第二种方式:

在public/js/目录中创建vue-script.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('')
    }
   }
 })

在resources/views/目录中创建sample.blade.php文件

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

and go to url : /testvue in your browser

这篇关于laravel 5 vue设置不清楚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！