在 vue js 中使用 express 车把 [英] Using express handlebars with vue js

问题描述

我正在使用快速把手构建一个用于服务器端模板的应用程序.在客户端，我想使用 vue.js.但是，它们共享相同的双括号符号 {{ variable }}.现在，我的 vue.js 变量没有显示，因为我的把手模板覆盖了它.例如:

home.html:

{{message}}//这个不会显示

home.js:

new Vue({el: '#app',数据: {消息:你好 Vue.js！"}});

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

res.render('../views/home', {message: '来自车把的消息'});

消息会显示出来.

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

提前致谢！

解决方案

您可以将 Vue 分隔符更改为 其他内容，例如:

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 中使用 express 车把的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！