Django模板中的Vue.js
发布于 2021-01-29 15:05:41
我正在尝试在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 ]]。还有其他人遇到过类似的问题吗？
关注者
0
被浏览
134
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）以便保持最新！
