使用带有vue js的快速把手

Tru*_*ran 12 node.js handlebars.js vue.js

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

home.html的:

<div id="app">
   {{message}} //this will not show up
</div> 
Run Code Online (Sandbox Code Playgroud)

home.js:

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
});
Run Code Online (Sandbox Code Playgroud)

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

res.render('../views/home', {
    message: 'message from handlebars'
});
Run Code Online (Sandbox Code Playgroud)

消息将显示出来.

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

提前致谢!

Ton*_*taz 19

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

<div id="app">
   \{{message}} //this will not be replaced by handlebars
</div>
Run Code Online (Sandbox Code Playgroud)


Lin*_*org 18

您可以将Vue demlimiters更改为其他内容,例如:

Vue.config.delimiters = ['${', '}']
Run Code Online (Sandbox Code Playgroud)

  • 这对我来说不起作用,我目前必须在我创建的每个新Vew上设置分隔符:http://stackoverflow.com/questions/41523427/cant-use-vue-config-delimiters-can-only-set -delimiters上新-VUE (2认同)
  • 我的答案适用于Vue 1.在Vue 2中,您确实必须为每个组件设置分隔符. (2认同)