让 Django 和 Vue.js 与 {% verbatim %} 一起工作

Question

我试图让 django 和 Vue 一起工作，即使它们共享相同的 {{ X }} 模板语法。

我知道从 django 1.5 开始我们可以使用{% verbatim %} 标签。所以我想我可以像往常一样使用 django 模板，在我需要 VUE 接管的部分，我只会使用 {% verbatim %} 标记。然而，不是加载我的 vue 数据 django 加载了{{ variable }}。

例如，我的 django 代码如下所示：

{% verbatim %}

<div id='sessions'>
  <h2>{{message}}</h2>
</div>

{% endverbatim %} 

在我的 app.js 文件中，我有：

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

但不是渲染Hello Vue!，而是渲染{{message}}

控制台不显示任何错误，否则 vue 加载正确。

我怎样才能使两者协同工作？理想情况下不需要更改 vue.js {{}} 语法。

Answer 1

您可以将 Vue 的 interpolation delimiters 更改为您想要的任何内容。

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

这样你就可以使用你的框架需要的任何东西。

编辑

在这种情况下，@Costantin 在页面上有多个 div#session。