将VueJS安装到顶级div和用户提交的内容

Question

我正在构建一个小型指南网站，允许用户提交关于游戏的文章。在使用VueJS编写的JavaScript网站上有许多组件。该网站的大部分由Laravel提供支持，并以纯HTML格式呈现，但这些组件除外。目前，我已将VueJS挂载到#app或我的顶级div元素，这与Laravel配置中的默认值一样。

然后我像往常一样将组件拖放到页面中（< my-component>），VueJS将选择它们并适当地渲染它们。真棒。

但是，有几种情况下用户提交的内容实际上会破坏页面。例如，如果使用双括号{{example}}，则这是VueJS语法，它将拾取标签并拒绝呈现页面。另一个例子是，如果我需要在不是VueJS的主体中使用< script>标签，例如嵌入Twitch电视流。

看起来好像是因为Vue被挂载到#app，绝对那些共享VueJS语法的内容或者脚本标记都会打破页面。

正在装载到#app错误的想法？我应该分解所有的组件，并以某种方式更精细地启动它们吗？我非常喜欢将Vue组件放入代码< this-syntax>中的方法。

谢谢！

Answer 1

您可以使用Laravel的刀片引擎在前面使用@来禁用Vue.js对花括号的解释。他们将通过PHP保持不变这种方式，会选择离开他们通过Vue.js得到回升

Hello, @{{ name }}.

退房节上的JavaScript框架：

https://laravel.com/docs/5.4/blade#displaying-data