Javascript app.message使用Laravel中的Vue在控制台中返回未定义

我刚刚开始学习Vue，并一直关注Vue，但我仍停留在：

只需打开浏览器的JavaScript控制台并将app.message设置为 一个不同的值

我在Chrome的控制台中尝试了

app.message='test'

，它返回

“test”

，但在浏览器中文本不变

另外，当我在将其设置为“test”之前运行

app.message

时，它会返回

undefined

app.js

require('./bootstrap');

const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
});

/bootstrap

window._ = require('lodash');

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');
require('vue-resource');

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

@extends('layouts.app')

@section('content')
<div id="app">
  @{{ message }}
</div>
@endsection

test.blade.php

window._ = require('lodash');

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

window.Vue = require('vue');
require('vue-resource');

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

@extends('layouts.app')

@section('content')
<div id="app">
  @{{ message }}
</div>
@endsection

@extends（'layouts.app'））
@节（“内容”）
@{{message}}
@端部

我猜这与Laravel的做法有关，因为当我启动一个独立的html文件时，它就像Vue所说的那样工作。我也是拉威尔的新手，所以不知道这里发生了什么

---

使用Vue 2和Laravel 5.3

就我从live链接中看到的情况而言，这根本不是您预期的问题。 应用程序返回HTML元素集合，而不是Vue对象。 尝试在控制台中记录$vm（Vue对象），您将看到不同之处。 也许，尝试将该对象从const-app重命名为vue（小写），因为我认为您（或包管理器或其他人）已经在其他地方使用过该应用

app.message在控制台上返回“test”的原因是每个控制台语句都返回一些内容。它首先返回undefined，因为app（HTML集合）没有名为message的属性

---

这个

const-app=new-Vue（{data:{//your-data}}}）。$mount（“#app”）

php文件输出的html是什么？@PanJunjie潘俊杰 以下是html输出：@Belmin做同样的事情：（你能给一个工作链接，或者把它放在某个地方，就像你说的，它在HTML文件上工作，而且似乎是特定于laravel的，我们可以在访问页面的控制台后进行正确的调试。图例！还知道为什么

test=new Vue

可以工作，但是

var test=new Vue

不能工作吗？（正如在Vue指南中一样，他们使用var。一个词是scope。当您使用var test时，声明的变量被本地化到它声明的块中。当您不使用var时，您只需在控制台中访问即可标记为全局变量。您也可以尝试window.test=new Vue（）；