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)以获得最新版本!
归档时间: |
|
查看次数: |
4074 次 |
最近记录: |