Question

我安装了VueJS2用于laravel。从简单的测试设置开始，这是app.blade.php

<!DOCTYPE html>
<html>
<head>
    <script scr="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MEDIFAKTOR - @yield('title') </title>
    <link rel="stylesheet" href="css/vendor.css" />
    <link rel="stylesheet" href="css/app.css" />
</head>
<body>

  <!-- Wrapper-->
    <div id="wrapper">
        <!-- Navigation -->
        @include('layouts.navigation')
        <!-- Page wraper -->
        <div id="page-wrapper" class="gray-bg">
            <!-- Page wrapper -->
            @include('layouts.topnavbar')
            <!-- Main view  -->
            @yield('content')
            <!-- Footer -->
            @include('layouts.footer')
        </div>
        <!-- End page wrapper-->
    </div>
    <!-- End wrapper-->
<script src="js/app.js" type="text/javascript"></script>
  <script>
      var data = {
          message: 'Greetings your majesty'
      };
      new Vue({
          el: '#app',
          data: data
      })
  </script>
  @section('scripts')
@show
</body>
</html>

这就是我想要显示的内容

index.blade.php

@extends('layouts.app')
@section('title', 'Main page')
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center m-t-lg">
                            <h1>MEDIFAKTOR server</h1>
                        </div>
                        <div id="app">
                            <h1>{{message}}</h1>
                        </div>
                    </div>
                </div>
            </div>
@endsection

当我刷新时，我收到错误：

80e040fb5fff0b0cf766194784388a0cd255e6c9.php中的ErrorException 10：使用未定义的常量消息 - 假设'消息'（查看： /home/vagrant/Development/Source/MFServer/resources/views/home/index.blade.php）

这对我来说听起来像是VueJS无法识别。我根据VueJS网站和laracasts.com安装

我把它放错了吗？

的package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0"
  }
}

Answer 1

尝试在索引裁剪刀片中使用 @ {{message}} 代替{{message}}。因为你的消息不是php变量的JS框架变量。在变量之前添加 @ 符号。

Answer 2

如果您使用 @ 符号解决了问题，但仍然收到错误“Vue未定义”，正如您在评论中所说，您的代码中有拼写错误 - 您应该使用属性 src ，而非 scr 。所以vue.min.js的正确包含应该是这样的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>

当你的JS代码在加载vue.min.js之前开始执行时，你可能会遇到问题，尝试使用onload event for vue JS file：

<script onload="vueIsReady()" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<script type="text/javascript">
function vueIsReady(){
      var data = {
          message: 'Greetings your majesty'
      };
      new Vue({
          el: '#app',
          data: data
      })
}
</script>

或者您可以使用以下的importScript函数：https://developer.mozilla.org/en/docs/Web/API/HTMLScriptElement

// definition of the function importScript ...

// call function importScript with two parameters - script URL and onload handler function
importScript('https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js', function(){
    function vueIsReady(){
      var data = {
          message: 'Greetings your majesty'
      };
      new Vue({
          el: '#app',
          data: data
      })
    }
});

Answer 3

如果您在渲染vuejs时遇到问题＆＃39;大括号 {{}}。 @ {{}}应该做的伎俩或简化事情你可能会考虑刀片 @逐字 HTML代码{{vuejs_vars}} @endverbatim

刀片中的逐字标记确保它们之间的任何标记都不会被刀片引擎和它们解析。按原样打印。

Answer 4

Vue在assets / bootstrap.js中声明。所以，检查那里。如果它就位，可能在Vue实例上创建的钩子上进行调试：

created: function () {
console.log('instance created')
}

尝试从那里进行调试。

Laravel中的VueJS设置

4 个答案: