javascript - Express 数据模板与 Vue.js 数据冲突

Question

我正在开发一个 HTML 渲染应用程序，其中我的后端框架使用 Express，前端使用 Vue.js。

后端:

function handleHome(request, response) {
  response.render('home', { title: 'Express' });
}

前端 home.html 和 js

<div id="app">
  <h1>{{ title }}</h1>
  <h4>{{ author }}</h4>
  <p>{{ content }}</p>
</div>

var vm1 = new Vue({
  el: '#app',
  data: {
      author: 'Johnnie Walker',
      title: 'Aging Your Own Whisky',
      content: 'A bunch of steps and a whole lot of content'
  }
});

渲染时，Express 会删除所有 {{stuff}} 并将其设为空，这与 Vue.js 冲突。如何在不影响 Express 的情况下实现这一目标并使用 Vue.js 构建前端操作？基本上我想从express中转义{{stuff}}。如何做到这一点？

Answer 1

Express 和 Vue.js 都使用 {{ 和 }} 作为插值分隔符。您可以使用以下命令更改 vue.js 端的这些分隔符:

var vm1 = new Vue({
  el: '#app',
  delimiters: ['${', '}'],  // <--
  data: {
      author: 'Johnnie Walker',
      title: 'Aging Your Own Whisky',
      content: 'A bunch of steps and a whole lot of content'
  }
});

现在，您应该更改模板以匹配给定的分隔符:

<div id="app">
  <h1>${ title }</h1>
  <h4>${ author }</h4>
  <p>${ content }</p>
</div>

以上字符串将由 vue.js 进行插值，而不是 Express。

来源:https://v2.vuejs.org/v2/api/#delimiters