在 vue js 中使用 express handlebars
Using express handlebars with vue js
我正在为服务器端模板构建一个使用 express handlebars 的应用程序。在客户端,我想使用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 进行服务器端模板化?
提前致谢!
您可以将 Vue 分隔符更改为 something else,例如:
Vue.config.delimiters = ['${', '}']
这可以通过转义车把模板中的第一个大括号来解决。
<div id="app">
\{{message}} //this will not be replaced by handlebars
</div>
您可以 "escape" Handlebars 中的 Vue 分隔符,方法是使用 raw block helper:
Handlebars.registerHelper('vue-js', function(options) {
return options.fn();
});
Handlebars 模板中的用法:
{{{{vue-js}}}}
<div id="app">
{{message}}
</div>
{{{{/vue-js}}}}
我正在为服务器端模板构建一个使用 express handlebars 的应用程序。在客户端,我想使用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 进行服务器端模板化?
提前致谢!
您可以将 Vue 分隔符更改为 something else,例如:
Vue.config.delimiters = ['${', '}']
这可以通过转义车把模板中的第一个大括号来解决。
<div id="app">
\{{message}} //this will not be replaced by handlebars
</div>
您可以 "escape" Handlebars 中的 Vue 分隔符,方法是使用 raw block helper:
Handlebars.registerHelper('vue-js', function(options) {
return options.fn();
});
Handlebars 模板中的用法:
{{{{vue-js}}}}
<div id="app">
{{message}}
</div>
{{{{/vue-js}}}}