繁体   English   中英

laravel 刀片中没有 output 请找出我的错误。 我不知道会发生什么

[英]Nothing output in laravel blade please find my error. I don't know what happen

我是 laravel 和视图的新手。我不知道如何解决这个问题。 请找到我的错误。 我在 app.js 中发表了评论

 const app = new Vue({
  el: "#app",
  data() {
    return {
      message: "haha"
    };
  }
});

而是写在 main.blade.php

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" src="{{ asset('css/app.css')}}">
    <script src="{{ asset('js/app.js')}}">
  </head>
  <body>
    <div id="app">
      @{{message}}
      <script>
          const app = new Vue({
            el: "#app",
            data() {
              return {
                message: "haha"
              };
            }
          });
      </script>
    </div>
  </body>
</html>

但是当我在 web.php 中运行时

    Route::get('/main',function(){
  return view("layouts.main");
});

什么都没有显示。 这是页面源代码

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" src="http://localhost:8000/css/app.css">
    <script src="http://localhost:8000/js/app.js">
  </head>
  <body>
    <div id="app">
      {{message}}
      <script>
          const app = new Vue({
            el: "#app",
            data() {
              return {
                message: "haha"
              };
            }
          });
      </script>
    </div>
  </body>
</html>

然后是 webpack.mix.js 中的代码

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

mix.js('node_modules/popper.js/dist/popper.js', 'public/js').sourceMaps()

请在这个错误中点亮我。 我花了很多时间。 我仍然失去解决方案。

您必须将脚本标签放在#app div 之外

      <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" src="http://localhost:8000/css/app.css">
        <script src="http://localhost:8000/js/app.js">
      </head>
      <body>
        <div id="app">
          {{message}}
          
        </div>
<script> 
const app = new Vue({
                el: "#app",
                data() {
                  return {
                    message: "haha"
                  };
                }
              });
          </script>
      </body>
    </html>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM