将 VueJS 挂载到*** div 和用户提交的内容

Posted 2023-02-23

【中文标题】将 VueJS 挂载到*** div 和用户提交的内容

【英文标题】：Mounting VueJS to top level div & user submitted content

【发布时间】：2018-01-26 23:31:57

【问题描述】：

我正在构建一个小型指南网站，允许用户提交有关游戏的文章。网站上有许多使用 VueJS 用 Ja​​vascript 编写的组件。该网站的大部分内容由 Laravel 提供支持，并以纯 html 呈现，除了这些组件。目前，我已将 VueJS 安装到 #app 或我的*** div 元素，这是 Laravel 配置的默认设置。

然后我像往常一样将组件放入页面中（），VueJS 将拾取这些组件并适当地呈现它们。太棒了。

但是，在某些情况下，用户提交的内容实际上会破坏页面。例如，如果使用双括号 example ，这是 VueJS 语法，它会拾取标签并拒绝渲染页面。另一个例子是如果我需要在正文中使用不是 VueJS 的

似乎因为 Vue 被挂载到#app，绝对内部所有共享 VueJS 语法或者是脚本标签的东西都会破坏页面。

安装到#app 是错误的想法吗？我是否应该拆分所有组件并以某种方式以更精细的方式启动它们？我真的很喜欢使用 将 Vue 组件放入代码中的方法。

谢谢！

【参考方案1】：

您可以通过在花括号前面使用 @ 来禁用 Laravel 的刀片引擎对 Vue.js 中的花括号的解释。通过这种方式，它们将不受 php 的影响，并将让它们被 Vue.js 拾取

Hello, @ name .

查看有关 javascript 框架的部分：

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

【讨论】：

对不起，我认为你没有理解这个问题 - Vue 拿起括号是这里的问题。

我不明白这是怎么可能的，因为双括号是由服务器端语言呈现的，只有这样 javascript 才能解释已经解析的内容。