Django模板中的Vue.js

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试在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 ]]。还有其他人遇到过类似的问题吗？

回答：

正如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）以便保持最新！

以上是 Django模板中的Vue.js 的全部内容， 来源链接： utcz.com/qa/425520.html

回到顶部