由于之前練習koa2，直接渲染的jquery寫的傳統頁面。

這次想偷懶，直接script引入vue，發現渲染不出data值。

渲染引擎用得是xtpl, 找了半天沒有發現可以修改xtpl渲染分隔符的配置

vue有！

var myVue = new Vue({ el: ’#msgBoard’, delimiters:[’$$’,’$$’], data() { return { msg: { num: 10 } } }, mounted() { console.dir(this) }, })

補充知識：前端——vue和nunjucks的模板渲染符{{}}沖突解決辦法

由于在thinkjs上使用的是nunjucks的渲染技術，在了解到vue的時候發現vue用的也是{{}}進行模板代碼識別。

找了一個vue的html代碼放到thinkjs上面跑，發現數據無法綁定。然后上網尋得解決辦法如下：

修改vue的標識符，前后加{% raw %}、{% endraw %}，如下：

{% raw %}{{result.name}}{% endraw %}

問題解決。

以上這篇解決vue與node模版引擎的渲染標記{{}}(雙花括號)沖突問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。