Django模板中的Vue.js

Yas*_*tal 2 javascript python django django-templates vue.js

我想在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>
Run Code Online (Sandbox Code Playgroud)

我将Vue的插值分隔符更改为[[]]以避免与Django冲突.我script.js看起来如下:

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

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

nik*_*k_m 10

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

// ES6 template string style
Vue.config.delimiters = ['${', '}']
Run Code Online (Sandbox Code Playgroud)

因此,在您的示例中更改为:

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

不过,强烈建议使用新版本的Vue(版本2)以获得最新版本!