Django模板中的Vue.js [英] Vue.js in Django Templates
本文介绍了Django模板中的Vue.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在Django模板中使用Vue.js。这样的模板如下：
I am trying to use Vue.js in Django templates. One such template is the following:
{% 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 看起来如下：
I changed Vue's interpolation delimiters to [[ ]] to avoid conflict with Django. My script.js looks as follows:
$(function() {
var app = new Vue({
el: '#myApp',
delimiters: ['[[', ']]'],
data: {
message: 'Hello, world!'
}
});
});
不幸的是，呈现的HTML包含 [[message]] 。有人遇到过类似的问题吗？
Unfortunately, the HTML rendered contains [[ message ]]. Has anyone else faced a similar issue?
推荐答案
与文档说：
// ES6 template string style
Vue.config.delimiters = ['${', '}']
因此，在您的示例中更改为：
So, in your example change to:
$(function() {
Vue.config.delimiters = ['[[', ']]'];
var app = new Vue({
el: '#myApp',
data: {
message: 'Hello, world!'
}
});
});
但是强烈建议使用新版本的Vue（版本2）来是最新的！
It is strongly recomended, though, to use the new version of Vue (version 2) in order to be up-to-date!
这篇关于Django模板中的Vue.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
