javascript - 使用 {% verbatim %} 让 Django 和 Vue.js 协同工作

Question

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

我知道从 django 1.5 开始我们可以使用 {% verbatim %} 标签。所以我想我可以像往常一样使用 django 模板，在我需要 VUE 接管的部分我只会使用 {% verbatim %} 标签。但是，django 没有加载我的 vue 数据，而是加载了 {{ 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#sessions。