使用Express Handlebars与Vue.js

Question

我正在使用express handlebars进行服务器端模板构建应用程序。在客户端，我想使用vue.js。然而，它们都共享相同的双大括号标记{{ variable }}。目前，我的vue.js变量未显示，因为我的handlebars模板覆盖了它。例如：

home.html:

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

主页.js：

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

但是，如果我在服务器端的控制器中定义了message：

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

信息将会显示出来。

总的来说，我是否可以在客户端使用 Vue.js 进行模板处理，同时仍然使用 Express-handlebars 进行服务器端模板处理？

提前致谢！

- Trung Tran

Answer 1

您可以通过在 handlebars 模板中转义第一个大括号来解决此问题。

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

- Tony Mottaz

---

它不会被Handlebars处理... 也不会被VueJs处理（这似乎是问题）。 - michel.iamit

Answer 2

您可以将Vue的定界符更改为其他内容，例如：

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

- Linus Borg

---

这个方法对我来说并没有起作用，我目前必须在每个新创建的Vue上设置分隔符：https://dev59.com/tJ3ha4cB1Zd3GeqPcv0o - ripper234

我的回答适用于Vue 1。在Vue 2中，确实需要为每个组件设置分隔符。 - Linus Borg

Answer 3

您可以使用原始块助手在Handlebars中“转义”Vue分隔符：

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

在Handlebars模板中的使用：

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

- Zaroth

---

这很简单而且聪明，但如果我想在helper内部使用handlebars怎么办？还有由3个大括号定义的helpers。 - Abdullah Alkurdi