Laravel 4.2 Vuejs答案

【问题标题】：Laravel 4.2 VuejsLaravel 4.2 Vuejs
【发布时间】：2017-12-10 07:19:09
【问题描述】：

我在 laravel 4.2 中工作，我想在我的应用程序中实现 Vue.js。当我在刀片中放入一些测试代码时，它只显示错误“使用未定义的常量消息 - 假定为'消息'”我知道 laravel 像 php 代码一样读取 {{message}} 但你知道如何添加 vue. js到我的刀片？感谢帮助。这是代码

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        message: 'hello from Vue.js 2.0'
    }
})
</script>
<div id="app">
<p>{{ message }}</p>
</div>

【问题讨论】：

你为什么使用 laravel 4.2？
我工作的公司使用 laravel 4.2
所以没人不知道怎么升级？抱歉这么粗鲁......但你需要在某个时候升级。何时有人会发现安全漏洞或某些漏洞利用只是时间问题。不要使用旧软件！

标签： javascript php laravel vue.js

【解决方案1】：

您可以在打印消息验证之前添加@

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <script>
        $(document).ready(function () {
            new Vue({
                el: '#app',
                data: {
                    message: 'hello from Vue.js 2.0'
                }
            })
        });
    </script>
    <div id="app">
        <p>@{{ message }}</p>
    </div>

【讨论】：

当我添加 @ 它加载我的页面没有 laravel 错误但只显示 {{message}} 实际上不是我的消息数据。
您需要在文档就绪部分添加jquery库和vuejs代码
好的，我找到了解决方案。我把脚本标签放在我的页面上而不是顶部。

【解决方案2】：

使用@转义代码

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        message: 'hello from Vue.js 2.0'
    }
})
</script>
<div id="app">
<p>@{{ message }}</p>
</div>

请参阅使用花括号显示原始文本部分here

【讨论】：