Laravel 4.2 Vuejs

Posted 2023-02-23

【中文标题】Laravel 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

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

【参考方案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