使用带有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'
});

消息将显示。

总而言之，有没有一种方法可以将vue.js用于客户端模板，同时仍然使用快速把手进行服务器端模板化？

提前致谢！

Answer 1

您可以将Vue demlimiters更改为something else，例如：

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

Answer 2

这可以通过逃离手柄模板中的第一个支撑来解决。

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

Answer 3

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

QTransform trans= painter.combinedTransform();
QRect transformed = trans.mapRect(rectangle);

Handlebars模板中的用法：

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