vue jsでのエクスプレスハンドルバーの使用

Question

私はサーバー側のテンプレート用のエクスプレスハンドルバーを使用してアプリケーションを構築しています。クライアント側では、vue.jsを使用したいただし、両者は同じ二重ブレス表記{{ variable }}を共有しています。現在のところ、私のハンドルバーのテンプレートがそれをオーバーライドしているため、私のvue.js変数が表示されません。

home.html：

<div id="app"> 
    {{message}} //this will not show up 
</div> 

home.js：たとえば

new Vue({ 
    el: '#app', 
    data: { 
     message: 'Hello Vue.js!' 
    } 
}); 

しかし、私は私のサーバー側のコントローラでmessageを定義する場合：

res.render('../views/home', { 
    message: 'message from handlebars' 
}); 

メッセージ表示されます。

要約すると、サーバー側のテンプレートにexpress-handlebarsを使用している間にクライアント側のテンプレートにvue.jsを使用できる方法はありますか？

ありがとうございます！

Answer 1

あなたは例えば、Vueのはsomething elseにdemlimiters変更することができます。：

Vue.config.delimiters = ['${', '}'] 

Answer 2

これはあなたのハンドルバーテンプレートの最初のブレースをエスケープすることによって解決することができます。

あなたが raw block helperを使用してハンドルバーにVueの区切り文字を "エスケープ" することができます

<div id="app"> 
    \{{message}} //this will not be replaced by handlebars 
</div> 

Answer 3

：ハンドルバーテンプレートで

Handlebars.registerHelper('vue-js', function(options) { 
    return options.fn(); 
}); 

使用法：

{{{{vue-js}}}} 
<div id="app"> 
    {{message}} 
</div> 
{{{{/vue-js}}}}