Vue.js数据无法在Django模板中显示的技术求助

嘿，我来帮你搞定这个问题！你遇到的情况主要是Django模板语法和Vue插值语法冲突，再加上脚本加载顺序错误导致的，咱们一步步来修复：

1. 核心问题拆解 #

• Django 默认用 {{ }} 作为模板变量标记，这和 Vue.js 的插值语法完全重合。当 Django 渲染模板时，会把你写的 {{message}} 当成自己的模板变量处理，但你并没有在视图中传递这个变量，所以最终渲染出来的是空内容，Vue 根本没机会解析它。
• 你目前先加载了 app.js 再加载 Vue 库，这会导致创建 Vue 实例时，Vue 核心代码还没被加载，自然无法正常工作。

2. 具体解决方案 #

方案一：修改 Vue 的插值分隔符（推荐） #

直接让 Vue 使用其他分隔符，彻底避免和 Django 的语法冲突，后续写模板更省心：

修改你的 app.js：

new Vue({
  el: '#app',
  delimiters: ['[[', ']]'], // 把Vue的插值标记改成[[ ]]
  data: {
    message: 'Hello from Vue!'
  }
})

修改 HTML 中的 Vue 模板部分：

<div id="app">[[message]]</div>

方案二：用 Django 的 verbatim 标签包裹 Vue 模板 #

告诉 Django 不要解析标签内的内容，把这部分完全交给 Vue 处理：

<div id="app">
  {% verbatim %}
    {{message}}
  {% endverbatim %}
</div>

调整脚本加载顺序 #

必须先加载 Vue 库，再加载你的 app.js，确保 Vue 核心代码先初始化完成：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="{% static "app.js" %}" defer></script>

3. 完整修改后的 HTML 示例 #

{% load static %}
<body>
  <p>No polls are available.</p>
  <div id="app">[[message]]</div>
  
  <!-- 先加载Vue核心库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
  <!-- 再加载自定义Vue实例脚本 -->
  <script src="{% static "app.js" %}" defer></script>
</body>

最后再检查一下：确保 app.js 放在 Django 项目的 static 目录下，{% static %} 标签能正确定位到它；你的 Vue 版本是 2.x，代码写法完全适配这个版本。

内容的提问来源于stack exchange，提问作者Max0u