Django + Vue.js问题

问题描述 投票:1回答:2

我想在我的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
2个回答
2
投票

您需要在模板中使用标记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

© www.soinside.com 2019 - 2024. All rights reserved.