將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