如何解决Django模板与Vue.js渲染时出现的冲突问题？
- 内容介绍
- 文章标签
- 相关推荐
本文共计292个文字，预计阅读时间需要2分钟。
在Django模板中使用Vue.js时，可能会遇到无法渲染的问题，因为Django默认的HTML渲染使用的是{{ }}，与Vue的默认插值方式{{ }}相同。这会导致Vue无法正确绑定数据。解决方法是使用Vue的指令如v-if、v-on、v-model、v-等，而不是依赖Django的模板语法。
在django模版中使用vue.js会出现无法渲染问题，因为django默认html渲染使用的是{{ }}与vue的默认方式一致。因此会出现无法渲染问题。不过不影响vue的数据绑定如：v-ifv-onv-modev-html等方式。
在网上我看到许多办法我亲测下来发现都没有效果，只有以下方式有效。话不多说，直接贴demo代码
from django.shortcuts import render# Create your views here.
def index(request):
return render(request,"index.html")<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/vue/vue_2.js"></script>
<script src="unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
{% verbatim %}
{{ message }}
{% endverbatim %}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
本文共计292个文字，预计阅读时间需要2分钟。
在Django模板中使用Vue.js时，可能会遇到无法渲染的问题，因为Django默认的HTML渲染使用的是{{ }}，与Vue的默认插值方式{{ }}相同。这会导致Vue无法正确绑定数据。解决方法是使用Vue的指令如v-if、v-on、v-model、v-等，而不是依赖Django的模板语法。
在django模版中使用vue.js会出现无法渲染问题，因为django默认html渲染使用的是{{ }}与vue的默认方式一致。因此会出现无法渲染问题。不过不影响vue的数据绑定如：v-ifv-onv-modev-html等方式。
在网上我看到许多办法我亲测下来发现都没有效果，只有以下方式有效。话不多说，直接贴demo代码
from django.shortcuts import render# Create your views here.
def index(request):
return render(request,"index.html")<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/vue/vue_2.js"></script>
<script src="unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
{% verbatim %}
{{ message }}
{% endverbatim %}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>