制作Django& Vue.js与{％verbatim％}一起工作 [英] Making Django & Vue.js work together with {% verbatim %}

问题描述

我正在尝试制作django&即使Vue共享相同的{{X}}模板语法，Vue也能协同工作。

I'm trying to make django & Vue work together even though they share the same {{ X }} template syntax.

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

I know that from django 1.5 we can use the {% verbatim %} tag. So I thought I could use django templates as usual and in the section where I need VUE to take over I would just use the {% verbatim %} tag. However instead of loading my vue data django loads the {{ variable }}.

例如我的django代码看起来类似这样的事情：

For example my django code looks something like this:

{% verbatim %}

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

{% endverbatim %} 

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

And in my app.js file I have:

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

但不是渲染 Hello Vue！而是渲染 {{message}}

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

The console doesn't show any error and vue loads correctly otherwise.

如何使两者协同工作？理想情况下无需更改vue.js {{}}语法。

How I can make the two work together? Ideally without the need to change the vue.js {{}} syntax.

推荐答案

你可以改变Vue的插值分隔符到你想要的任何内容。

You can change Vue's interpolation delimiters to whatever you want.

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

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

That way you can use whatever your framework needs.

编辑

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

It turned out in this case, @Costantin had more than one div#sessions on the page.

这篇关于制作Django& Vue.js与{％verbatim％}一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！