使用带有vue js的快速句柄 [英] Using express handlebars with vue js

问题描述

我正在用服务器端模板的快速句柄构建应用程序。在客户端，我想使用vue.js.但是，它们都共享相同的双括号记法 {{variable}} 。现在，我的vue.js变量没有显示，因为我的句柄模板重写了它。例如：

home.html：

 < div id = 应用程序 > 
 {{message}} //这不会显示
< / div> b 
 
 
 $ b 
 >  new Vue（{
 el：'#app'，
 data：{
 message：'Hello Vue.js！'
} 
}）; 
  

然而，如果我在我的 message 服务器端控制器：

  res.render（'../ views / home'，{
 message：'message从车把'
}）; 
  

消息将显示。

总之，有没有办法让vue.js用于客户端模板化，同时仍然使用express-handlebar进行服务器端模板化？

预先感谢！ p>

解决方案

您可以将Vue demlimiters更改为其他，例如：

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

I am building an app using express handlebars for server-side templating. On the client side, I want to use vue.js. However, they both share the same double brace notation {{ variable }}. Right now, my vue.js variables are not showing because my handlebars template is overriding it. For example:

home.html:

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

home.js:

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

HOWEVER, if I define message in my server side controller:

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

the message will show up.

So in summary, is there a way i can use vue.js for client side templating while still using express-handlebars for server side templating?

Thanks in advance!

解决方案

You can change the Vue demlimiters to something else, e.g.:

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

这篇关于使用带有vue js的快速句柄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！