ExpressデータテンプレートとVue.jsデータとの競合

Question

バックエンドフレームワークがExpressで、フロントエンドでVue.jsを使用しているHTMLレンダリングアプリケーションで作業しています。

バックエンド：

function handleHome(request, response) { 
    response.render('home', { title: 'Express' }); 
} 

フロントエンドhome.htmlとjsが

<div id="app"> 
    <h1>{{ title }}</h1> 
    <h4>{{ author }}</h4> 
    <p>{{ content }}</p> 
</div> 

それがレンダリング

var vm1 = new Vue({ 
    el: '#app', 
    data: { 
     author: 'Johnnie Walker', 
     title: 'Aging Your Own Whisky', 
     content: 'A bunch of steps and a whole lot of content' 
    } 
}); 

、Expressは、すべての{{stuff}}し、それを空にして、その矛盾を取り除きますVue.jsでExpressに影響を与えずにこれを達成し、Vue.jsを使用してフロントエンド操作を構築するにはどうすればよいですか？基本的に私は急行から{{stuff}}を逃れたいです。どうやってするか？

Answer 1

ExpressとVue.jsは両方とも補間の区切り文字として{{と}}を使用します。あなたは、次のとvue.js側でこれらの区切り文字を変更することができます。

var vm1 = new Vue({ 
    el: '#app', 
    delimiters: ['${', '}'], // <-- 
    data: { 
     author: 'Johnnie Walker', 
     title: 'Aging Your Own Whisky', 
     content: 'A bunch of steps and a whole lot of content' 
    } 
}); 

を今、あなたは特定の区切り文字に合わせてテンプレートを変更する必要があります。文字列の上

<div id="app"> 
    <h1>${ title }</h1> 
    <h4>${ author }</h4> 
    <p>${ content }</p> 
</div> 

はVUEで補間されます。 Expressの代わりにjsを使用します。

出典：https://vuejs.org/v2/api/#delimiters