vue.js 的 Laravel 未定义变量异常答案

【问题标题】：Laravel undefined variable exception with vue.jsvue.js 的 Laravel 未定义变量异常
【发布时间】：2016-05-06 08:12:31
【问题描述】：

我想在 laravel 刀片系统中测试一个简单的 vue.js，这是我在 test.blade.php 视图文件中的代码：

<div id="app">
   <p>{{message}}</p>
</div>
 <script src="{{url('/assets/js/vue/vue.min.js')}}"></script>
 <script>
  new Vue({
    el:'#app',
    data:{
        message:"hello world"
    }
});
</script>

问题是在渲染视图文件时 laravel 想要将 message 作为变量或常量访问，并且因为没有任何 message 变量传递给 view 我得到 使用未定义的常量异常。那么有什么办法呢？

【问题讨论】：

标签： php laravel vue.js laravel-blade

【解决方案1】：

添加@{{消息}}

这将告诉刀片忽略这一点。

【讨论】：

【解决方案2】：

将相同的符号组合用于前端和后端并不是一个好方法。当然，有了@，Blade 可以忽略。

一个更简洁的想法是从后端提取前端，因为 Blade 和 Vue.js 使用相同的符号：

带有 html、css 和 javascript 的前端（在您的情况下为 Vue.js）
后端（在 php 中，在你的情况下是 Laravel）作为 REST-api 和返回 json 的 php

最大的优势：

更安全
更易于维护
它更干净

【讨论】：