Django + Vue.js 问题答案

【问题标题】：Django + Vue.js issueDjango + Vue.js 问题
【发布时间】：2017-12-14 19:40:28
【问题描述】：

我想在我的 Django 项目中实现 Vue.js。

Code: 

<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
  </head>

  <body>
    <div id="demo">
        <p>{{message}}</p>
    </div>

    <script>
        var demo = new Vue({
            el: '#demo',
            data: {
                message: 'Hello Vue.js!'
            }
        });
    </script>
</body>
</html>

除了我的 django 项目之外的任何地方都可以使用。有任何想法吗？

【问题讨论】：

标签： javascript python django vue.js

【解决方案1】：

您需要在模板中使用标签verbatim 转义大括号：

<div id="demo">
    <p>{% verbatim %}{{message}}{% endverbatim %}</p>
</div>

【讨论】：

【解决方案2】：

问题是 Vue.js 模板语法与 Django 模板语法冲突（对于 Jinja2）。两种技术都使用{{ 和}}。

但是 Vue.js 可以很容易地配置为使用另一个开始和结束字符进行变量替换：

<body>
    <div id="demo">
        <p>${message}</p>
    </div>

    <script>
        var demo = new Vue({
            delimiters: ['${', '}'],
            el: '#demo',
            data: {
                message: 'Hello Vue.js!'
            }
        });
    </script>
</body>

见Vue.js delimiters API doc。

【讨论】：

在角度方面也有同样的问题。最终用方括号交换了大括号...