使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的插值分隔符更改为您想要的任何内容.

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

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

编辑

事实证明,在这种情况下,@ Costeinin在页面上有多个div#sessions.