Django集成Vue.js失效求助：表达式未解析功能无法运行

1. Vue自定义分隔符未配置 #

你用了{[ 10/2 ]}作为Vue表达式标记，但Vue默认不识别这种格式，必须手动配置分隔符才能让它生效：

new Vue({
  el: '#app',
  delimiters: ['{[', ']}'], // 关键配置，告诉Vue用这个解析表达式
  data: {},
  methods: {
    register() {
      // 注册逻辑
    }
  }
})

没加这个配置的话，Vue会直接忽略{[ ]}内容，自然不会解析成5。

2. Vue实例挂载目标异常 #

检查Vue实例的el选项对应的DOM元素是否存在、拼写是否一致：

<!-- 页面中必须有对应id的容器 -->
<div id="app">
  {[ 10/2 ]}
  <button @click="register">注册</button>
</div>

如果容器是动态生成的（比如Django模板渲染后才出现），要改用手动挂载：

const app = new Vue({
  delimiters: ['{[', ']}'],
  // 其他配置
})
app.$mount('#app')

3. 脚本加载顺序错误 #

必须先加载Vue.js，再执行你的自定义Vue代码：

<!-- 先加载Vue -->
<script src="{% static 'js/vue.js' %}"></script>
<!-- 再写Vue实例代码 -->
<script>
  new Vue({ /* ... */ })
</script>

反过来的话会报Vue is not defined，打开浏览器控制台（F12）就能看到这类错误。

4. 静态文件引用失败 #

如果用本地Vue.js文件，检查Django静态文件配置和引用路径：

{% load static %}
<script src="{% static 'js/vue.js' %}"></script>

去浏览器网络面板看Vue.js的请求状态，要是返回404，说明路径写错了。

5. 点击事件未正确绑定 #

确认注册按钮的@click绑定的方法在Vue实例的methods里存在且拼写正确：

new Vue({
  // ...其他配置
  methods: {
    register() {
      console.log('按钮触发') // 先加日志，看控制台有没有输出
      // 你的注册逻辑
    }
  }
})

控制台没日志输出的话，要么是Vue实例没挂载成功，要么是方法名写错了。

6. 页面存在JS语法错误 #

打开浏览器控制台（F12 -> Console），检查有没有语法报错——比如逗号漏写、引号不匹配、变量未定义等，这些都会直接导致Vue实例初始化失败。

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