由于之前練習(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è)參考，也希望大家多多支持好吧啦網(wǎng)。