制作Django＆amp; Vue.js与{％verbatim％}一起工作

Question

我试图制作django＆amp;即使Vue共享相同的{{X}}模板语法，Vue也能协同工作。

我知道从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!'
  }
})

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

修改

在这种情况下，@ Cossin在页面上有多个div＃sessions。