解決vue與node模版引擎的渲染標記{{}}(雙花括號)沖突問題
更新時間：2020年09月11日 13:11:58 作者：以夢為馬papapa
這篇文章主要介紹了解決vue與node模版引擎的渲染標記{{}}(雙花括號)沖突問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
由于之前練習koa2，直接渲染的jquery寫的傳統(tǒng)頁面。
這次想偷懶，直接script引入vue，發(fā)現(xiàn)渲染不出data值。
渲染引擎用得是xtpl, 找了半天沒有發(fā)現(xiàn)可以修改xtpl渲染分隔符的配置
vue有！
var myVue = new Vue({
el: '#msgBoard',
delimiters:['$$','$$'],
data() {
return {
msg: {
num: 10
}
}
},
mounted() {
console.dir(this)
},
})
補充知識：前端——vue和nunjucks的模板渲染符{{}}沖突解決辦法
由于在thinkjs上使用的是nunjucks的渲染技術，在了解到vue的時候發(fā)現(xiàn)vue用的也是{{}}進行模板代碼識別。
找了一個vue的html代碼放到thinkjs上面跑，發(fā)現(xiàn)數(shù)據(jù)無法綁定。然后上網尋得解決辦法如下：
修改vue的標識符，前后加{% raw %}、{% endraw %}，如下：
{% raw %}{{result.name}}{% endraw %}
問題解決。
以上這篇解決vue與node模版引擎的渲染標記{{}}(雙花括號)沖突問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了Vue3中響應式解構props的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-11-11
vue打包部署到springboot并通過tomcat運行的操作方法
這篇文章主要介紹了vue打包部署到springboot并通過tomcat運行的操作方法,本文通過實例圖文并茂的形式給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要為大家詳細介紹了vue uniapp實現(xiàn)分段器效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue創(chuàng)建項目卡住不動,vue?create?project卡住不動的解決
這篇文章主要介紹了vue創(chuàng)建項目卡住不動,vue?create?project卡住不動的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文章通過實現(xiàn)一個vue-dialog的彈出層組件，然后附加說明如果發(fā)布此包到npm，且能被其他項目使用。本文給大家介紹的非常詳細，需要的的朋友參考下2017-03-03
這篇文章主要介紹了vue修改數(shù)據(jù)頁面無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue中data數(shù)據(jù)初始化方法，數(shù)據(jù)初始化是在組件實例化時發(fā)生的，在組件中，可以通過data選項來定義組件的初始數(shù)據(jù)，需要詳細了解可以參考下文2023-05-05
這篇文章主要給大家介紹了關于Vuex中Getter的基本使用教程,getter相當于Vuex中的計算屬性 對 state 做處理再返回,本文通過示例代碼將Getter介紹的非常詳細,需要的朋友可以參考下2021-07-07
Vue3中使用Element-Plus的el-upload組件限制只上傳一個文件的功能實現(xiàn)
在 Vue 3 中使用 Element-Plus 的 el-upload 組件進行文件上傳時,有時候需要限制只能上傳一個文件,本文將介紹如何通過配置 el-upload 組件實現(xiàn)這個功能,讓你的文件上傳變得更加簡潔和易用,需要的朋友可以參考下2023-10-10
詳解vuex 中的 state 在組件中如何監(jiān)聽
本篇文章主要介紹了詳解vuex 中的 state 在組件中如何監(jiān)聽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05