当我们在django框架中运行以下html代码:
...
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "testtest",
}
})
</script>
</body>
...
我们会发现页面并没有显示出message的内容,根本原因是vue框架的"{{ }}"跟django框架有冲突存在,作如下修改:
...
<body>
<div id="app">
[[ message ]] // ***修改处***
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
delimiters: ["[[", "]]"], // ***修改处***
data: {
message: "testtest",
}
})
</script>
</body>
...
再运行: