使用帶vue的快速句柄js

我正在構建一個應用程序，使用快速句柄來進行服務器端模板。在客戶端，我想使用vue.js.但是，它們都具有相同的雙括號記法{{ variable }}。現在，我的vue.js變量沒有顯示，因爲我的句柄模板重寫了它。例如：使用帶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' 
});

消息將出現。

總之，有沒有一種方法可以將vue.js用於客戶端模板，同時仍然使用express-handlebar進行服務器端模板化？

在此先感謝！

來源

2016-04-10 Trung Tran

您可以更改的Vue demlimiters到something else，例如：

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

來源

2016-04-10 13:43:17

這並沒有爲我工作，我目前必須爲每個新創建的Vew設置分隔符：http://stackoverflow.com/questions/41523427/cant-use-vue-config-delimiters-can-only-set-delimiters-on-new-vue – ripper234

我的答案適用於Vu e 1.在Vue 2中，您確實必須爲每個組件設置分隔符。 –

無賴。但很高興知道。 – ripper234

這可以通過在車把模板逃脫第一支撐來解決。

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

來源

2017-01-26 16:36:33

它不會被句柄處理....但也不是由VueJs（這似乎是問題） –

但它適用於我 – spikeyang

使用raw block helper可以「越獄」在車把Vue公司的分隔符：

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

在車把模板用法：作書面

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

來源

2017-09-19 12:07:02 Zaroth

使用帶vue的快速句柄js

回答

相關問題