如何解决Django与Vue语法的冲突

1.问题之始:最近用Django写项目的时候,引入Vue时,vue的渲染语法不生效!

2.解决办法:

当我们在django web框架中,使用vue的时候,会遇到语法冲突.
因为vue使用{{}},而django也使用{{}},因此会冲突.

解决办法1:


在django1.5以后,加入了标签:
{% verbatim myblock %} {% endverbatim myblock %}
被此标签包裹的代码将不会被Django的模板引擎渲染。

因此,我们可以把带有{{ }} 的Vue代码放在 {% verbatim myblock %}标签中间,例如:

 

<div id="app1">
{% verbatim myblock %}
{{ message1 }}
{% endverbatim myblock %}
</div>


解决办法2:
修改Vue的{{ }} 为{[ ]}

<script>Vue.config.delimiters = ["{[", "]}"]</script>


使用的时候:

<div id="app1">
{[ message1 ]}
</div>
即可。

posted @ 2018-10-17 14:05  范俊呈  阅读(989)  评论(0编辑  收藏  举报