在django模板語法中是通過{{ 變量名 }}的方式來引用變量,這是一種很流行的方式,在vue和angularJs中也是使用這種語法的,但是在用django+vue進行開發時,會遇到模板語法衝突,django的渲染器會把vue的代碼中的變量覆蓋掉,給我們的開發帶來不便。
1.解決方案1
在django1.5以後的版本,給出瞭解決方法,即使用標籤{% verbatim myblock %} {% endverbatim myblock %}
例如:
{% verbatim myblock %}
<span>Message: {{ msg }}</span>
{% endverbatim myblock %}
被此標籤包裹的內容,django的模板引擎不會對其進行渲染,從而解決語法衝突的問題。
2.解決方案2
修改Vue的{{ }} 爲{[ ]},即通過js代碼<script>Vue.config.delimiters = ["{[", "]}"]</script>
使用的時候:
<div id="app1">
{[ message ]}
</div>
這樣就解決了django模板語法和vue模板語法衝突的問題