使用明智的手柄与vue js

我正在build立一个应用程序使用快车手柄为服务器端模板。 在客户端，我想使用vue.js. 但是，它们都共享相同的双括号记法{{ variable }} 。 现在，我的vue.jsvariables不显示，因为我的句柄模板重写它。 例如：

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-handlebars进行服务器端模板化？

提前致谢！

Answer 1

你可以改变Vue demlimiters到别的东西 ，例如：

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

Answer 2

这可以通过转移车把模板中的第一个大括号来解决。

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

Answer 3

你可以通过使用原始块帮助器来“转义”把手中的Vue分隔符：

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

在把手模板中的用法：

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