使用带有 vue js 的快速车把答案

【问题标题】：Using express handlebars with vue js使用带有 vue js 的快速车把
【发布时间】：2016-07-31 12:42:23
【问题描述】：

我正在为服务器端模板构建一个使用快速车把的应用程序。在客户端，我想使用 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'
});

消息会显示出来。

总之，有没有一种方法我可以使用 vue.js 进行客户端模板，同时仍然使用 express-handlebars 进行服务器端模板？

提前致谢！

【问题讨论】：

【解决方案1】：

您可以使用raw block helper“转义”Handlebars 中的 Vue 分隔符：

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

Handlebars 模板中的用法：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以将 Vue 分隔符更改为 something else，例如：

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

【讨论】：