如何将Django传递给模板的变量赋值到Vue实例的data属性中

方法1：直接在Vue实例代码中嵌入Django模板变量 #

直接在写Vue实例的script块里，用Django模板语法输出变量即可，为了避免特殊字符转义和XSS风险，推荐搭配Django内置的escapejs过滤器使用：

var app = new Vue({
  el: "#app",
  data: { 
    // 数字、布尔等类型可以直接写
    myvar: {{ myvar|escapejs }}
  }
})

如果你的变量是字符串类型，需要在外层包裹引号：

myvar: "{{ myvar|escapejs }}"

方法2：通过HTML自定义属性传递（更推荐） #

如果你不想把Vue代码和Django模板语法混写，可以先把变量存在HTML元素的自定义属性上，再在Vue中读取，适配后续前后端模板分离的场景：
首先在index.html里给Vue挂载的根节点添加自定义属性：

<div id="app" data-myvar="{{ myvar|escapejs }}"></div>

然后在Vue实例中读取该属性：

var app = new Vue({
  el: "#app",
  data: { 
    // 如果是数字类型可以用Number()手动转换格式
    myvar: this.$el.dataset.myvar
  }
})

注意：如果你的Vue和Django模板都使用{{ }}作为变量分隔符，会出现解析冲突，可以修改Vue的分隔符规避问题：

var app = new Vue({
  delimiters: ['[[', ']]'],
  el: "#app",
  // 其余配置保持不变
})

修改后Vue的变量用[[ ]]包裹，和Django的{{ }}语法互不影响。

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