Tornado和Vue模板冲突

Question

我是这两个框架的新手，我发现的第一件事是冲突。因为双大括号是 Tornado 保留的，所以我将 Vue 的默认大括号更改为单大括号：

      new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    message: 'Hello Vue.js!'
  }

模板：

<td>${ message }</td>

但现在它没有渲染，我在浏览器中看到的是：

${ message }

如何解决这个冲突呢？难道我做错了什么？谢谢！

UPD我明白了。我做错了几件事：1）我把脚本放在“头部”部分而不是最后。2）我没有向某些父元素添加 id="app" 属性来指定应用程序对象。在我更改代码后，一切都开始工作。

Answer 1

将 Tornado 与另一个使用双括号的模板系统结合起来的另一种方法是转义由 javascript 处理的内容{{!：

<h1>This variable comes from Tornado: {{ x }}</h1>
<p>This one comes from Vue: {{! y }}</p>

Tornado的渲染会去掉感叹号，留下双大括号供Vue使用。