使用Vue + Django模板语言时如何解决双花括号问题？

Question

我正在使用Django模板语言,并希望在我的项目中使用Vue.我遇到的一个主要问题是{{...}}语法.我的Vue数据根本没有渲染.

<div id="app">{{ message }} // This is just empty on my page </div>

我只是使用这个基本的Vue脚本:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

我该如何解决这个问题？

Answer 1

glenfant说的很简单,但这更容易.

var app = new Vue({
    delimiters: ['{', '}'],
    el: '#app',
    data: { message: 'Hello Vue!' },
})

这就是全部:您使用应该使用的标签配置Vue.:)我只使用一个支架 - {…}但你也可以使用加倍的方括号:[[和]].

Answer 2

<div id="app">{% verbatim %}{{ message }}{% endverbatim %}</div>