django模板與vue.js衝突問題

django模板與vue.js的變數都是使用“{{”和“}}”包裹起來的，在渲染django模板時會先替代掉所有的“{{”和“}}”及被包裹在其中的內容，使得vue.js沒有使用”{{“、”}}”來繫結變數。

解決方案

1、修改vue.js的預設的繫結符號

  Vue.config.delimiters = ["[[", "]]"];

2、使用模板的標籤來輸出`{{`、`}}`

  詳情參見: https://docs.djangoproject.com/en/2.1/ref/templates/builtins/

3、禁用django模板渲染

  django標籤 verbatim可以使包裹其中的程式碼不進行渲染保持原樣輸出 {% verbatim %} {{ vue }} {% endverbatim %}