Laravel的Blade模板引擎与Angular均使用“{ {}}”标签冲突

 

由于很多 JavaScript 框架也使用花括号表明给定的表达式将要在浏览器中显示，比如 Vue：

<div id="example">
{{ message.split('').reverse().join('') }}
</div>

Vue 和 Laravel 一样使用 {{ }}，那么需要使用 @{{ }} 或 @verbatim 指令来正确输出 Vue 代码

两种方式
@ 前缀
， 可以使用 @ 符号通知 Blade 渲染引擎某个表达式应保持不变。示例如下：

<h1>Laravel</h1>

Hello, @{{ name }}.

在这个例子中， @ 符号将被 Blade 删除；在 Blade 引擎中 {{ name }} 表达式将保持不变，取而代之的是 JavaScript 引擎将渲染该表达式。

@verbatim 指令
如果要在大段的模板中 JavaScript 变量，可以将 HTML 包裹在 @verbatim 指令中，这样就不需要为每个 Blade 回显语句添加 @ 符号:

@verbatim
<div class="container">
Hello, {{ name }}.
</div>
@endverbatim

原文：https://learnku.com/laravel/wikis/25665