Django中引入vue没反应

最新推荐文章于 2025-05-24 13:49:21 发布

原创最新推荐文章于 2025-05-24 13:49:21 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Django

python 专栏收录该内容

5 篇文章

订阅专栏

在Django项目中使用Vue.js时遇到模板语法冲突，由于Django默认接管了{{ }}，导致Vue无法正常工作。为解决这个问题，需要将Vue中使用到的{{ }}用 Django 的模板标签 {{% %}} 包裹，从而避免两者之间的冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Django中引入了vue，但是demo中不能读取message：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

　　问题出在“{{ }}”这个符号，原因是Django的模板系统会默认接管{{ }}中间的变量，跟Vue.js就冲突了。
　　把需要用到{{ }}的地方用模板标记：
　　{% verbatim %} {{ message }} {% endverbatim %}
　　包裹起来就好了。
　　这个有点坑。