Django现有项目CDN引入Vue.js后数据绑定失效求助

我有一个基于Django开发的现有Web应用，希望添加Vue.js功能。为避免Webpack的复杂配置，我按照Vue 2官方文档的建议，通过CDN引入vue@2.5.16脚本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

页面中包含如下HTML结构：

<div id="app"> just an app {{ message }} </div>

并编写了内联脚本初始化Vue实例：

<script type="text/javascript" > 
var app = new Vue({ 
    el: '#app', 
    data: { 
        message: 'Hello Vue!' 
    } 
}) 
</script>

但页面并未渲染出"Hello Vue!"内容，请问该如何解决？

这是Django和Vue.js最常见的冲突问题之一——两者都使用{{ }}作为模板变量的插值语法，Django模板引擎会优先解析你的{{ message }}，把它当成Django模板变量处理，而不是留给Vue去渲染，所以最终页面上的这个表达式要么被替换为空（如果Django上下文里没有message变量），要么被替换成Django的变量值，导致Vue无法识别。

这里有两个简单的解决方法：

方法一：修改Vue的插值分隔符 #

你可以在初始化Vue实例时，自定义Vue的插值分隔符，避开Django的{{ }}，比如改成[[ ]]：

var app = new Vue({ 
    el: '#app', 
    delimiters: ['[[', ']]'], // 自定义插值分隔符
    data: { 
        message: 'Hello Vue!' 
    } 
})

然后把HTML里的插值表达式改成对应的格式：

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

这样Django就不会解析这个表达式，会完整地留给Vue处理。

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

如果你不想修改Vue的语法习惯，可以用Django的{% verbatim %}标签把Vue的模板区域包裹起来，告诉Django不要解析这个区域内的模板语法：

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

这样Django会原封不动地输出{{ message }}，Vue就能正常识别并渲染它了。

两种方法都能解决你的问题，你可以根据自己的开发习惯选择其中一种~

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