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