Django模板中的Vue.js

小编典典

Django模板中的Vue.js

python

我正在尝试在Django模板中使用Vue.js。以下是一种这样的模板：

{% load static %}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div id="myApp">
        <span>Hello [[ message ]]</span>
        <div id="map"></map>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://v1.vuejs.org/js/vue.js"></script>
    <script src="{% static 'js/script.js' %}"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"></script>
</body>

</html>

我将Vue的插值定界符更改为 [[]]， 以避免与Django发生冲突。我的script.js样子如下：

$(function() {
    var app = new Vue({
        el: '#myApp',
        delimiters: ['[[', ']]'],
        data: {
            message: 'Hello, world!'
        }
    });
});

不幸的是，呈现的HTML包含[[ message ]]。还有其他人遇到过类似的问题吗？

阅读 707

2021-01-20

共1个答案

小编典典

正如Vue v1.0的每个文档所说：

// ES6 template string style
Vue.config.delimiters = ['${', '}']

因此，在您的示例中更改为：

$(function() {
    Vue.config.delimiters = ['[[', ']]'];
    var app = new Vue({
        el: '#myApp',
        data: {
            message: 'Hello, world!'
        }
    });
});

但是，强烈建议您使用新版本的Vue（版本2）以便保持最新！

2021-01-20